1

I am setting map markers and I want to add awesome font marker. I am using a 3rd party api (OverlappingMarkerSpiderfier ) that requires the marker URL.

Right now I am getting a local marker, marker.svg. But I want to use awesome font's marker is there anyway to call awesome font marker?

iconURL = 'marker.svg'
iconSize = new (google.maps.Size)(23, 32)
marker.setIcon
  url: iconURL
  scaledSize: iconSize
duncan
  • 31,401
  • 13
  • 78
  • 99
Whitecat
  • 3,882
  • 7
  • 48
  • 78
  • I can't see how, as the marker in awesome font is simply a glyph inside of a font, rather than a standalone image – Jaromanda X May 16 '17 at 06:04
  • What it is the point of having the marker for a map if it cannot be placed on a map? I want to know if some one uses the marker on a map and how they do it. – Whitecat May 16 '17 at 16:28
  • Do you mean something like this: https://sites.google.com/site/gmapsdevelopment/ – ReFran May 16 '17 at 17:59
  • Those are nice yes. but I was wondering awesome font can be used. I think the answer is no. – Whitecat May 16 '17 at 22:10

1 Answers1

1

Fonts cannot be used for marker images.

Though, nathan-m converted the font to images and you can use those:

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

His answer to the same question had an example of the code.

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)
});
Alexander
  • 638
  • 3
  • 11