Question

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 ?

Answer 1

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.