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 ?

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 ?

• javascript
• google-maps
• overlay
• google-maps-markers

5 Answers 5

you can use custom overlays - https://developers.google./maps/documentation/javascript/customoverlays for that

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.

How can I overlay SVG diagrams on Google Maps?

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

Google Maps Bubble Templates

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, bined with the nifty maximize function.

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);