CODEWITHSUNDEEP
javascriptgoogle-mapsfont-awesomejquery-gmap3glyphicons
user736893
user736893

Reputation:

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.

Upvotes: 1

Views: 1692

Answers (2)

user736893
user736893

Reputation:

"richMarkers" from Google is a much better solution.

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

Upvotes: 1

user736893
user736893

Reputation:

Turns out this is remarkably easy! You replace "marker" with "overlay" which allows you to do the following:

    overlay:{
        values: [
            { latLng: [38.55240, -90.41710], data: "PRINTER01", options: { content: "<div>Whatever you want here!</div>" }  },
            { address: "1234 E. Main Street, Springfield USA", data: "SERVER01", options: { content: "<div><i class='icon-reorder'></i></div>" } }
        ],

Upvotes: 2

Related Questions