如何使Google Map与网站内容互动

Question

I have a Google Map that I created in the Google Map Maker with custom markers on it. This map is embedded in my website.

What I'd like to do is set it up in such a way that when a user clicks one of the "pins" on the Google Map, a div becomes visible on the website that provides more detail on that pin. When a user clicks another pin, the previous div goes invisible and the relevant div becomes visible with more detail on that pin etc. I know how to hide and show divs, its just the interaction with the Google Map that I don't fully understand.

I understand this is most likely a job for JavaScript, but I'd love someone to point me in the right direction.

Here's the site in question http://oliwebconz.ipage.com/destinationwaikanae/stay.html

Many thanks in advance!
Ollie

Answer 1

Take a look at this documentation page from Google. It shows you how to execute a function when you click on a marker on the map. In the pages around that page you can find more examples of adding listeners to ready events, map click event, zoom events etc.