Merge image and map Google Maps

Navigation
1

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

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

How do I add this event to the entire map.

But it has a detail, it's a "" plugin, "" so I'm afraid to make changes: link

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, merge everything, being the image and the one map only.

ATT

    
asked by anonymous 15.04.2015 / 02:10

1 answer

2

What you can do is to have a div with the bg image and the map inside the div, and in the div you put an onclick function. For the user to understand that it is "clickable", you can put the css cursor: pointer in the div. I think 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, you could adjust the div and your image according to need.   If you need to leave the map transparent, not to touch the component, you can place it inside another div with opacity from 1 to 0.01.

I hope I have helped.

    
15.04.2015 / 21:56
Upload pages without duplicating content through AJAX Problem with random values