5

I have been searching on the Google Map API V3 documentation but I could not find any way to use my own html content instead of an image to create a custom icon on the map. I would like to display a dynamic marker that can display text or anything I want.

For exemple :

    <div class="marker">Dynamic text</div>

I have seen this thread google map api v3: can I use a div instead of an image to create the custom icon? where someone advice to use "Custom Overlays" but in the documentation it only displays an image... I don't see the point of explaning how to display an image with "Custom Overlays" if it is done to display html content. http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays

How should I proceed then ? Should I use Custom Overlays ? There is not anything that seem easier to do that ?

Community
  • 1
  • 1
httpete
  • 5,875
  • 4
  • 32
  • 41

3 Answers3

2

Actually you can use float the div over your map using CSS. You have to be careful about the positioning. Check out this post: div on top of div with Google Maps API

Community
  • 1
  • 1
Mano Marks
  • 8,761
  • 3
  • 27
  • 28
2

Mano's got the right answer if you're looking to position something on the map that isn't bounded geographically, like a menu or titlebar.

If you're looking to display something geographically-bound, like a city name (pretending for a second that the API doesn't already do this) than you'll be headed the CustomOverlay route. While all the examples use images, that's not a requirement by any means. If you look at the simple overlay example and view the source code around line 62 you'll see the exact lines adding the <img> object to the <div>. You could just as easily add text to the div instead of an image.

bamnet
  • 2,525
  • 17
  • 21
0

Go to this demo purpose website: http://easysublease.org/mapcoverjs/

On the map, right Click on map, and you will see a context menu. Within this context menu, there is a input, you can just input some text on the input. Then next generated Marker will have the text you entered there.

To see how it works, you can go to its github: https://github.com/bovetliu/mapcover.

Mapcover.js is one javascript gadget enabling Developers to Write HTML/CSS to create customized elements on Google Map.

Bowei Liu
  • 161
  • 1
  • 9