Usar fonts de icons como marcadores en Google Maps V3

Me preguntaba si es posible usar icons de fonts de íconos (por ejemplo, Font Awesome) como marcadores en Google Maps V3 para reemplazar el marcador predeterminado. Para mostrar / insertarlos en un documento HTML o PHP, el código del marcador sería:

 

    Aquí está mi bash de hacer lo mismo (usando la biblioteca de utilidad “markerwithlabel”) antes de darme cuenta de que Nathan hizo lo mismo más elegantemente arriba: http://jsfiddle.net/f3xchecf/

     function initialize() { var myLatLng = new google.maps.LatLng( 50, 50 ), myOptions = { zoom: 4, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP }, map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions ), marker = new MarkerWithLabel({ position: myLatLng, draggable: true, raiseOnDrag: true, icon: ' ', map: map, labelContent: '', labelAnchor: new google.maps.Point(22, 50) }); marker.setMap( map ); } initialize(); 

    Simplemente tuve el mismo problema: decidí hacer una conversión rápida y sucia y alojar en github.

    https://github.com/nathan-muir/fontawesome-markers

    Puede incluir manualmente el archivo JS o utilizar npm install fontawesome-markers o bower install fontawesome-markers .

    Simplemente incluya el archivo javascript fontawesome-markers.min.js y puede usarlos de la siguiente manera:

     new google.maps.Marker({ map: map, icon: { path: fontawesome.markers.EXCLAMATION, scale: 0.5, strokeWeight: 0.2, strokeColor: 'black', strokeOpacity: 1, fillColor: '#f8ae5f', fillOpacity: 0.7 }, clickable: false, position: new google.maps.LatLng(lat, lng) }); 

    Editar (abril de 2016): ahora hay paquetes para v4.2 -> v4.6.1

    Sé que esta es una publicación anterior, pero por si acaso puedes usar el objeto MarkerLabel ahora:

     var marker = new google.maps.Marker({ position: location, map: map, label: { fontFamily: 'Fontawesome', text: '\uf299' } }); 

    Trabajó para mi.

    Ver el icono de fontawesome en el marcador del mapa de google .

    Referencia Google Maps Maker

    En un navegador moderno, se puede usar el canvas para convertir la fuente a png, y luego usar el esquema de URI de datos:

     function getIcon(glyph, color) { var canvas, ctx; canvas = document.createElement('canvas'); canvas.width = canvas.height = 20; ctx = canvas.getContext('2d'); if (color) { ctx.strokeStyle = color; } ctx.font = '20px FontAwesome'; ctx.fillText(glyph, 0, 16); return canvas.toDataURL(); } 

    Por ejemplo: getIcon("\uf001") para la nota musical.

    La solución ligera

    • fontawesome-marcadores: 480kb
    • markerwithlabel: 25kb

    Para evitar estas dependencias, vaya a fontawesome-markers , busque la ruta del icono que desea e inclúyalo de la siguiente manera:

     var icon = { path: "M27.648-41.399q0-3.816-2.7-6.516t-6.516-2.7-6.516 2.7-2.7 6.516 2.7 6.516 6.516 2.7 6.516-2.7 2.7-6.516zm9.216 0q0 3.924-1.188 6.444l-13.104 27.864q-.576 1.188-1.71 1.872t-2.43.684-2.43-.684-1.674-1.872l-13.14-27.864q-1.188-2.52-1.188-6.444 0-7.632 5.4-13.032t13.032-5.4 13.032 5.4 5.4 13.032z", fillColor: '#E32831', fillOpacity: 1, strokeWeight: 0, scale: 0.65 } marker = new google.maps.Marker({ position: myLatlng, map: map, icon: icon }); 

    He creado una biblioteca JS simple que genera buenos marcadores SVG usando los íconos Font Awesome. https://github.com/jawj/MapMarkerAwesome