Home / Questions / 11835
Accepted
Alan
Asked: 2020-06-04 12:07:51 +0800 CST 2020-06-04 12:07:51 +0800 CST

How to use css source icons as Markers in Google Maps V3

  • 772

I want to use css font icons (font awesome, glyphicons) as markers on google maps. I have tried to use a tag calling the class but it doesn't work, is this possible?

I have done it this way:

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

Any input would be of great help.

javascript

1 Answers

  1. Best Answer

    you can use this package

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

    To install it with bower just use

    bower install fontawesome-markers

    and it would stay this way

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

    It works because google maps markers also accept SVGs as image source.

    update

    I tried using glypicon to achieve the same effect and found this package that might help you too

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

    It's basically a glypicon build with fontawesome . The use is not as intuitive as the previous one but it is simple and in a few lines of code it is achieved.

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

L.marker([parseFloat(latitud),parseFloat(longitud)], {icon: marker}).addTo(mapa);
    • 2