Javascript Passing Click Event To Google Maps Through A Overlapping Div?

Say I have a google map embedded. If I put a div of the same size overlapping the google map with the same height and width... can I make it so that the onclick event of the div pa

Solution 1:

Why are you overlapping it with a div?

If you're trying to do that so you can grab users click too, there's no need for this, use google maps api

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map, "click", function() {
  alert("You clicked the map.");
});

Example taken from: http://code.google.com/intl/en-US/apis/maps/documentation/javascript/v2/events.html

Solution 2:

You could try catching the event on the div, and then trigger it (changing the target) over the map with jQuery.trigger

$(selector).trigger( event );

Jquery trigger

Hope this helps

Solution 3:

Yes, it is possible to do what you are asking. See this simple example I created to demonstrate: http://68.178.240.17/eventExample/

Conceptually events never "pass through" anything, events bubble. So if your DIV is a child of the target, events will bubble up to the target. (No crosstalk about event models please. It works in all browsers including IE.)

The way you would implement this with google maps is something akin to:

<DIV my GoogleMap container>
  <DIV my overlay positioned absolutely on top of the parent google map container></DIV>
</DIV>