varios una studio multiples multiple marcadores google ejemplos desde datos aƱadir agregar google-maps-api-3 google-maps-markers font-awesome icon-fonts

google maps api 3 - una - Usar fuentes de iconos como marcadores en Google Maps V3



google maps multiple markers (6)

Me preguntaba si es posible usar iconos de fuentes 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:

<i class="icon-map-marker"></i>


La solución ligera

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

Para evitar estas dependencias, vaya a github.com/nathan-muir/fontawesome-markers , busque la ruta del icono que desea e github.com/nathan-muir/fontawesome-markers 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 });


Aquí está mi intento 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: ''<i class="fa fa-send fa-3x" style="color:rgba(153,102,102,0.8);"></i>'', labelAnchor: new google.maps.Point(22, 50) }); marker.setMap( map ); } initialize();


En un navegador moderno, se puede usar el lienzo 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.



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.

.

Referencia Google Maps Maker


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

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