Replace markers with html content

Question

I was looking for documentation on the Google Map API V3 API, but could not find a way to use my own html content instead of an image to create a custom map icon. I would like to display a dynamic marker that can display text or whatever I want.

For instance:

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

I saw this google map api v3 thread : can I use a div instead of an image to create a custom icon? , where someone advises using "Custom Overlays" "but in the documentation it displays only the image ... I see no reason to explain how to display the image with" Custom Overlays "if it is made to display the contents of html. http: // code .google.com / apis / maps / documentation / javascript / overlays.html # CustomOverlays

How should I proceed? Should I use custom add-ons? Nothing is easier than doing this?

Answer 1

Mano got the correct answer if you want to position something on a map that is not geographically limited, such as a menu or title.

If you want to display something geographically geo-referenced, such as the name of a city (pretending that the API is not already doing this), you will head the CustomOverlay route. Although all examples use images, this is not a requirement in any way. If you look at an example of a simple overlay and look at the source code around line 62, you will see the exact lines that add the <img> object to the <div> . You could just add text to the div instead of the image.

Answer 2

In fact, you can use the float div above your map using CSS. You must be careful with positioning. Send message: div on top of the div with the Google Maps API

Answer 3

Go to the site of this demo goal: http://easysublease.org/mapcoverjs/

On the map, right-click on the map and you will see a context menu. There is an input in this context menu, you can simply enter the text on the tab. Then the next generated marker will contain the text that you entered there.

To find out how this works, you can go to his github: https://github.com/bovetliu/mapcover .

Mapcover.js is one javascript gadget that allows developers to write HTML / CSS to create custom elements on a Google Map.