Using Icon Fonts as Markers in Google Maps V3

by

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

More Related Contents:

  1. Change marker size in Google maps V3
  2. Google Maps API – Getting closest points to zipcode
  3. Google Maps API 3 – Custom marker color for default (dot) marker
  4. close InfoWindow before open another
  5. How to to Get Places (e.g Gas Stations) along Route Between Origin and Destination in Google Maps API
  6. How to get the formatted address from a dragged marker in Google Version Maps
  7. Google Maps single country boundary [closed]
  8. Google Places API – REQUEST_DENIED
  9. Google Maps API – Closest marker function change to closest n markers
  10. Retrieve latitude and longitude of a draggable pin via Google Maps API V3
  11. Trigger event with infoWindow or InfoBox on click Google Map API V3
  12. How to get a click event when a user clicks a (business) place on the map
  13. ‘item.geometry.location.kb’ and ‘item.geometry.location.jb’ returning undefined
  14. click event listener on styled map icons and labels
  15. Animating Multiple Markers
  16. How do I remove default markers?
  17. disable clickable landmark on google map
  18. Change Google Maps marker icon when clicking on other
  19. Google Maps Multiple markers with the exact same location Not working
  20. Leaflet Map API with Google Satellite Layer [duplicate]
  21. Correct redirect URI for Google API and OAuth 2.0
  22. To get more than 5 reviews from google places API
  23. Highlighting borders of state and cities of US in Google Map API 3
  24. Custom SVG markers won’t display in IE 11
  25. The key provided is not a valid Google API Key
  26. Blurry / Corrupted Google Maps Controls
  27. Directions API overview_polyline doesn’t have correct points
  28. Sending a details request to Google Places API – (CORS error) [duplicate]
  29. Is it possible to write custom text on Google Maps API v3?
  30. Google Maps API Multiple Markers with Infowindows

Leave a Comment