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

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>