Search code examples
javascriptgoogle-mapsfont-awesomejquery-gmap3glyphicons

Use HTML element instead of icon for map marker with gmap3?


I'm creating a map that will show devices of different types. Through out my web application, each device type has it's own unique icon. These are all done using fontawesome graphics. I would like the map "icons" to match, without having to screencap all of them and lose the ability to cleanly scale them as necessary.

It's very easy to use a custom image, as in the documentation example below, but does anyone know if I can use some HTML instead?

  marker:{
    values:[
      {latLng:[48.8620722, 2.352047], data:"Paris !"},
      {address:varAddress1, data:varData1},
      {address:varAddress2, data:varData2, options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}}
    ],
  ...

update: The possible duplicate mentioned uses PHP to extract icons from the font-awesome SVG. This is very restrictive. I would really like to be able to use an HTML element if possible.


Solution

  • "richMarkers" from Google is a much better solution.

    http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/