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 or PHP document the code for the marker would be:

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

I don't think it's possible, one way of doing it would be to extract the SVG properties from Font Awesome icons, and then define `google.maps.Symbol` using SVG notation. Then you'd be able to use them as symbols — nevi_me, May 11 '13 at 15:40
That's a good idea - after extracting the icon path and some modifications, I was able to create the desired effect. Thanks for pointing me in the right direction! — gfaw, May 13 '13 at 11:19
No worries, if you have time you could get them all into a `Font Awesome Google Maps` thing and host them on Github/Bitbucket. I think the Font Awesome license would permit that. — nevi_me, May 13 '13 at 19:42
Afaik folks are already working on making the font Google Maps compatible. To take advantage of it in the meantime open font-awesome.svg in an editor and search for the desired icon statement. Then copy the SVG path and it to define a custom polygon in google maps. Check the Google Maps V3 reference / code examples for details. — gfaw, May 14 '13 at 13:19
I know how to do it, just don't have the time to do it. There's a font set by Mapbox called `Maki`. I'm thinking of porting that into SVG — nevi_me, May 14 '13 at 16:04

nathan-m · Answer 1 · 2016-04-18T01:57:03.407

81

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

edited Apr 18 '16 at 01:57

answered Jun 26 '13 at 02:05

nathan-m

8,875
2
18
29

3

+1 for keeping the script updated over a year later! – Lindsey D Aug 16 '14 at 07:54
Nice. I found it usefull to offset the icon like: anchor: new google.maps.Point(30,-30) – Igor Krupitsky Feb 08 '15 at 09:30
fontawesome-markers.4.6.1.min.js - https://github.com/veteze/fontawesome-markers/blob/patch-1/fontawesome-markers.4.6.1.min.js – Ryan Vettese Apr 17 '16 at 23:06
4

I think its worth mentioning that the js file is 0.5 MB large. – Adam May 24 '16 at 09:05
I cannot find [GRADUATION_CAP icon](http://fontawesome.io/icon/graduation-cap/) in the [fontawesome-markers.min.js v4.6.1 script file](https://github.com/nathan-muir/fontawesome-markers/blob/master/fontawesome-markers.min.js), which was introduced with font-awesome v4.1. – Kar.ma Jun 06 '16 at 11:00
it has an alias - MORTAR_BOARD – nathan-m Jun 08 '16 at 10:09

score 46 · Answer 2 · edited Jun 09 '17 at 22:12

46

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.

See fontawesome icon on google map marker .

Reference Google Maps Maker

edited Jun 09 '17 at 22:12

wittich

2,079
2
27
50

answered Oct 09 '16 at 15:24

guido

557
4
8

Thanks dude, with this there is no need to use any external plugin. – HolloW Oct 15 '16 at 20:05
1

This is really confusing. You are talking about the markerLABEL not the marker. – Goowik Jan 05 '17 at 12:36
You can define the label obj as option for the Marker. As per doc "Adds a label to the marker. The label can either be a string, or a MarkerLabel object." – guido Jan 05 '17 at 15:56
6

This is legit! I didn't want the pinkish marker, so I just set the `Marker.icon = ' '` a single space, as done in Jason's answer. The [MarkerLabel](https://developers.google.com/maps/documentation/javascript/reference#MarkerLabel) can take all kinds of styles including fontSize and color to customize the icon. So simple. Thanks @guido! – Joel Mellon Aug 01 '17 at 05:36
4

For higher versions of the API, if above code doesn't work, just further enclose 'Fontawesome' with double quotes "'Fontawesome'" https://stackoverflow.com/questions/50256889/google-maps-v3-fontawesome5/51788072#51788072 – duduwe Aug 10 '18 at 14:03

score 29 · Accepted Answer · answered Dec 14 '14 at 10:05

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

this is nice bc it doesn't require the additional js, but I like both solutions. — Taruc, Jan 28 '15 at 17:18
I tried to get this to work but does not work nor does it work in fiddel. Do you have an updated solution? — Aaron, Mar 13 '17 at 20:18
@Aaron you need to use the github library linked in the other answer. https://github.com/nathan-muir/fontawesome-markers — Xander Luciano, May 30 '17 at 11:04

Jeremy Lynch · Answer 4 · 2017-10-28T03:32:35.927

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

You can also go to https://fontawesome.com/icons to download the svg for any icon and get the path. — Juan Jimenez, Oct 04 '18 at 15:27

score 13 · Answer 5 · answered Jun 14 '15 at 14:23

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.

`ctx.fillStyle = color;`, or `ctx.strokeText` instead of `ctx.fillText` — Laurent W., Jul 29 '15 at 20:43

Matej P. · Answer 6 · 2018-11-26T01:11:44.337

If you want the awesomefont MARKER with an awesomefont ICON INSIDE:

1. copy the SVG path of the awesomefont marker (click download and copy the SVG path) and use it as icon (remember to credit the authors, see license). Then you can change it's color to anything you want.

2. As label you only insert the awesome font icon code and the color you want.

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div id="map"></div>
<script>
  function init() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: new google.maps.LatLng(51.509865, -0.118092)
    });
    var icon = {
        path: "M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z", //SVG path of awesomefont marker
        fillColor: '#333333', //color of the marker
        fillOpacity: 1,
        strokeWeight: 0,
        scale: 0.09, //size of the marker, careful! this scale also affects anchor and labelOrigin
        anchor: new google.maps.Point(200,510), //position of the icon, careful! this is affected by scale
        labelOrigin: new google.maps.Point(205,190) //position of the label, careful! this is affected by scale
    }

    var marker = new google.maps.Marker({
      position: map.getCenter(),
      map: map,
      icon: icon,
      label: {
        fontFamily: "'Font Awesome 5 Free'",
        text: '\uf0f9', //icon code
        fontWeight: '900', //careful! some icons in FA5 only exist for specific font weights
        color: '#FFFFFF', //color of the text inside marker
      },
    });
  }
  google.maps.event.addDomListener(window, 'load', init);
</script>

From where I can get code like `uf0f9`? As I want different icons on map. — Waqas Altaf, Sep 07 '22 at 07:11

Justin Poehnelt · Answer 7 · 2021-06-11T00:44:23.420

It is possible to import the svgs directly from @fortawesome/free-solid-svg-icons and use the Icon Interface.

import { faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons";

function initMap(): void {
  const center = { lat: 0, lng: 0 };

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 9,
      center,
    }
  );

  new google.maps.Marker({
    position: { lat: 0, lng: 0 },
    map,
    icon: {
      path: faMapMarkerAlt.icon[4] as string,
      fillColor: "#0000ff",
      fillOpacity: 1,
      anchor: new google.maps.Point(
        faMapMarkerAlt.icon[0] / 2, // width
        faMapMarkerAlt.icon[1] // height
      ),
      strokeWeight: 1,
      strokeColor: "#ffffff",
      scale: 0.075,
    },
  });
}

Can try it at: https://codesandbox.io/embed/github/googlemaps/js-samples/tree/sample-marker-modern

score 3 · Answer 8 · answered May 17 '17 at 15:52

3

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

answered May 17 '17 at 15:52

jawj

463
3
11

Nice! Thank you for this! – anon Mar 22 '21 at 21:29

Zehlm Web Development LLC · Answer 9 · 2022-09-28T18:44:49.877

All I seen looks good, but they would not work for me; However, this worked smoothly and is small.

Use a link out to wherever your font awesome library is.

The normal marker javascript code is fine and add the icon attribute.

// The marker

var marker = new google.maps.Marker({

position: uluru,

icon: 'https://cdn.mapmarker.io/api/v1/pin?icon=fa-truck&size=50&hoffset=0&color=%23FFFFFF&background=%23FF7500&voffset=-1',

map: map,

});

}

You can change the font awesome icon, position, color, etc. right there in the icon: attribute.

Using Icon Fonts as Markers in Google Maps V3

9 Answers9

The light weight solution

Linked