3

Deseo utilizar íconos fuentes css (font awesome, glyphicons) como marcadores en google maps. He intentado utilizar una etiqueta llamando la clase pero no funciona, es esto posible?.

Lo he echo de esta forma:

 var marker = new google.maps.Marker({
    position: new google.maps.LatLng(parseFloat(latitud), parseFloat(longitud)),
    map: mapa,
    animation: google.maps.Animation.DROP,
    icon:'<i class="fa fa-map-marker"></i>',
    title: titulo
});

Cualquier aporte sería de gran ayuda.

1 respuesta 1

2

Puedes usar este paquete

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

Para instalarlo con bower sólo usa

bower install fontawesome-markers

y te quedaría de esta forma

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(parseFloat(latitud), parseFloat(longitud)),
    map: mapa,
    animation: google.maps.Animation.DROP,
    icon:{
        path: fontawesome.markers.MAP_MARKER,
        scale: 0.5,
        strokeWeight: 0.2,
        strokeColor: 'black',
        strokeOpacity: 1,
        fillColor: '#f8ae5f',
        fillOpacity: 0.7
    },
    title: titulo
});

Funciona porque los markers de google maps también aceptan SVGs como fuente de imagen.

Update

Intenté usar glypicon para lograr el mismo efecto y encontré este paquete que quizás te pueda servir también

https://github.com/lvoogdt/Leaflet.awesome-markers

Es básicamente una compilación de glypicon con fontawesome. El uso no es tan intuitivo como el anterior pero es sencillo y en pocas líneas de código se logra.

var marker = L.AwesomeMarkers.icon({
    icon: 'map-marker',
    prefix: 'glyphicon',
    markerColor: 'orange'
});

L.marker([parseFloat(latitud),parseFloat(longitud)], {icon: marker}).addTo(mapa);
3
  • Genial, era justo lo que buscaba, encontré otra manera de hacerlo con marker with label. pero en realidad me gusto mas esta manera, Muchas gracias
    – Alan
    el 3 jun. 2016 a las 21:36
  • @AlanPatiño Revisa mi update que te puse otro ejemplo de como usar glyphicon
    – devconcept
    el 4 jun. 2016 a las 23:08
  • esta muy interesante, lo único es que según lo que puedo leer esta diseñado para una librería de mapeo que se llama Leafletjs , ahora no se si se puede integrar con google-maps , estoy investigando pero no eh encontrado algo en concreto, muchas gracias por la info
    – Alan
    el 5 jun. 2016 a las 17:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.