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

google maps multiple markers

Question

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>

Answer 1

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
});

Answer 2

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();

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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