Using Icon Fonts as Markers in Google Maps V3

Question

I was wondering whether it is possible to use icon font icons (e.g. Font Awesome) as markers in Google Maps V3 to replace the default marker. To show/insert them in a HTML o

Answer 1

In a modern browser one can use the canvas in order to render the font to png, and then use the data URI scheme:

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

For example: getIcon("\uf001") for the music note.

Answer 2

Here's my attempt at the same thing (using "markerwithlabel" utility library) before I realised Nathan did the same more elegantly above: 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

The light weight solution

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

To avoid these dependencies, simple go to fontawesome-markers, find the path for the icon you want, and include it as follows:

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 4

I just had the same problem - decided to do a quick and dirty conversion and host on github.

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

You can manually include the JS file, or use npm install fontawesome-markers or bower install fontawesome-markers.

Just include the javascript file fontawesome-markers.min.js and you can use them like so:

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

Edit (April-2016): There's now packages for v4.2 -> v4.6.1

Answer 5

I've put together a simple JS library that generates nice SVG markers using the Font Awesome icons. https://github.com/jawj/MapMarkerAwesome

Answer 6

I know this is an old post, but just in case you can use the MarkerLabel object now:

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

Worked for me.

.

Reference Google Maps Maker