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 ?

score 6 · Accepted Answer · edited Jul 05 '14 at 16:19

6

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

edited Jul 05 '14 at 16:19

orloxx

153
11

answered Jan 27 '10 at 22:19

roman

11,143
1
31
42

2

Is the bounds property required for all overlays? Is it possible to center the overlay on a single pair of lat+lng coordinates (i.e. from a marker)? – o01 Nov 15 '11 at 14:05

score 3 · Answer 2 · edited May 23 '17 at 11:53

3

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?

edited May 23 '17 at 11:53

Community

1
1

answered Jan 27 '10 at 22:23

jessegavin

74,067
28
136
164

score 1 · Answer 3 · edited May 23 '17 at 12:08

1

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

Google Maps Bubble Templates

edited May 23 '17 at 12:08

Community

1
1

answered Jan 27 '10 at 22:43

Chris B

15,524
5
33
40

I don't want to display only notification windows (bubbles). Thank you ! – Cristian Toma Jan 28 '10 at 17:22

score 0 · Answer 4 · answered Jan 27 '10 at 22:24

0

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.

answered Jan 27 '10 at 22:24

Sean Vieira

155,703
32
311
293

What I need is to add a plain HTML element to some coordinates on the map, not inside a Google Maps native notification window. Thank you ! – Cristian Toma Jan 28 '10 at 17:16

Nux · Answer 5 · 2014-12-16T15:02:53.350

0

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

edited Dec 16 '14 at 15:02

answered May 26 '10 at 17:49

Nux

9,276
5
59
72

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

5 Answers5

Linked