Google Maps: How to add HTML elements to specific coordinates ?

Question

I would like to know how and if I can add standard HTML elements (div, button) to a specific set of coordinates on the map ?

For example I have a set of coordinates and I would like to attach a custom balloon notification to them

and when I pan away from the coordinates the element should disappear and when I pan back to them, the element should reappear.

Is it possible to do this with Google Maps ?

Answer 1

you can use custom overlays - http://code.google.com/intl/de-DE/apis/maps/documentation/overlays.html#Custom_Overlays for that

Answer 2

As roman said, you can create a custom javascript object which implements GOverlay.

Here's an example from another S.O. question where the guy wanted to insert an SVG on top of a google map. However I am pretty sure you could use his solution to just insert HTML.

http://stackoverflow.com/questions/1055367/overlay-svg-diagrams-on-google-maps#answer-1083207

Answer 3

What you want to look at is the openInfoWindowHtml function. You will need to add a marker to the map first. Check out this example on Google for a good example of this, combined with the nifty maximize function.

Answer 4

If you want make a custom balloon, see this question:

Google Maps Bubble Templates

Answer 5

See this as a base class for the latest Google Maps API version (v3):

Usage:

var rectBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(54.478490, 18.550357),
    new google.maps.LatLng(54.478434, 18.551952)
);
var obj = new overlayText(rectBounds, 'Some<br />HTML', objGMap3);