Google Maps v3 FontAwesome5

Question

I am trying to create a googleMap that uses dynamic fontAwesome markers

I can't seem to be able to set 'Font Awesome 5 Free' as the font to be used, though.

I can set 'Fontawsome' which works, but is not a webfont (It's a .TTF installed in MY system)

      var marker0 = createMarker({
        position: new google.maps.LatLng(33.808678, -117.918921),
        map: map,
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: '#F00',
          fillOpacity: 1,
          strokeWeight: 0,
          scale: 15
        },
        label: {
          fontFamily: "FontAwesome",
          fontWeight: '900',
          text: eval("'\\u"+'f0ab'+"'"),
          color: 'white'
        }
        }, "<h1>Marker 0</h1><p>This is the home marker.</p>");
    });

here's the jsfiddle: https://jsfiddle.net/robsilva/hxt5jcu5/

It looks like Google Maps is not applying the font-family property to the marker label that I created. The syntax, according to Google's docs, looks correct, but for some reason all style but that is not being applied. Here are some before and after screens where we manually placed that font-family styling on the right element...

Answer 1

I got it to work, check your jsFiddle https://jsfiddle.net/as0srs2b/1/

HTML

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<script src="https://use.fontawesome.com/6608b6cbc6.js"></script>
<div id="map_div" style="height: 400px;"></div>

JS

/*
 * declare map as a global variable
 */
var map;

/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

  /*
   * create map
   */
  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  /*
   * create infowindow (which will be used by markers)
   */
  var infoWindow = new google.maps.InfoWindow();

  /*
   * marker creater function (acts as a closure for html parameter)
   */
  function createMarker(options, html) {
    var marker = new google.maps.Marker(options);
    if (html) {
      google.maps.event.addListener(marker, "click", function () {
        infoWindow.setContent(html);
        infoWindow.open(options.map, this);
      });
    }
    return marker;
  }

  /*
   * add markers to map
   */
  var marker0 = createMarker({
    position: new google.maps.LatLng(33.808678, -117.918921),
    map: map,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: '#F00',
      fillOpacity: 1,
      strokeWeight: 0,
      scale: 15
    },
    label: {
      fontFamily: "FontAwesome",
      fontWeight: '900',
      text: "\uf0ab",
      color: 'white'
    }
    }, "<h1>Marker 0</h1><p>This is the home marker</p>"); 
});

You were concatenating the unicode wrong in the label as well as the fontawesome library was missing.

Answer 2

Since I did not want to customize my normal npm files to ensure easy updates, my solution was to create another scss file which is imported into my app.scss and uses the idea of @rsilva to fix the problem:

/*!
 * Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
$fa-font-path: "../webfonts" !default;

@font-face {
  font-family: 'FontAwesome5Free';
  font-style: normal;
  font-weight: 900;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');}

.fa,
.fas {
  font-family: 'FontAwesome5Free';
  font-weight: 900;
}

Thereby, I have a font family name without whitespaces but still can easily update my bootstrap package without changing any

Answer 3

I was on the same trouble , my map was showing a square icon instead of a nice FontAwesome. Firstly i've imported the .css and .js from cdnjs. I've never used Fontawesome before...

I delete everything and create a free account, and generate a "kit link" from https://fontawesome.com

As above, i got an url with a custom UID

<script src="https://kit.fontawesome.com/xxxxxxxx.js" crossorigin="anonymous"></script>

That made the tricks for me when using a label :

label: {
     text: '\uf299',
     fontFamily: 'FontAwesome',
     fontSize: '15px',
     color: 'white'
},

Answer 4

Just enclose the font family in either double or single quotes.

fontFamily: "'Font Awesome 5 Free'" // or '"Font Awesome 5 Fee"'

As already cited by rsilva, this seems to be a bug in the API. Simulated in v3.31:

1. It can't handle the spaces which invalidates the font-family attribute.
2. It also doesn't treat the value as string as shown here

Workaround

Answer 5

The problem happened because there's a bug with the GoogleMaps API where fonts with space character in their name don't get set in the marker properties.

I fixed it by loading FA locally and renaming the font to remove all the spaces, i.e. "FontAwesome5Free'. Thanks everyone for your input.