Merge image and map Google Maps

Question

I have the following situation. The google map and above the map I added an image. The problem is that when I add an event on the map, this event does not work from the image.. and vice versa.

google.maps.event.addListener(historicalOverlay, "click", function(event) {

How do I add this event across the map.

But it has a detail, it’s a """plugin""", so I’m afraid to make changes: http://www.the-di-lab.com/polygon/

Is it possible, I add the image behind the MAP, and give an opacity on the map... So the map would be in front, and the click would work... or else, merge everything, the image and the map being one.

ATT

Answer 1

what Voce can do is to have a div with the image of bg and the map inside the div, and in the div you put an onclick function. For the user to understand that it is "clickable", Voce can put the css cursor:Pointer in div. I believe that’s what you need.

<div id="tudo" style="cursor:pointer; background: url(../image/bg.png) top center no-repeat #FFF;">
     <map></map>
 </div>

in case, could adjust the div and your image according to need. If you need to make the map transparent, so as not to touch the component, you can put it inside another div with opacity from 1 to 0.01.

I hope I’ve helped.