Google API V3: issue with hover events using a polygon if groundOverlay is also defined

Question

I use Google API V3 and I want to have an overlay of earth and on this overlay a polygon that changes color when you hover over the mouse. The mouseover event works fine until no overlay has been defined on the ground. But if there is an overlay of land, the color does not change when you hover over the mouse.

Any suggestions?

Here is an example:

var newark = new google.maps.LatLng(40.740, -74.18); var imageBounds = new google.maps.LatLngBounds( new google.maps.LatLng(40.716216,-74.213393), new google.maps.LatLng(40.765641,-74.139235)); var myOptions = { zoom: 13, center: newark, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map"), myOptions); var oldmap = new google.maps.GroundOverlay( "http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", imageBounds); oldmap.setMap(map); //Points to create polygon var points = [ new google.maps.LatLng(40.735657,-74.172367), new google.maps.LatLng(40.743588,-74.179498), new google.maps.LatLng(40.732878,-74.182777) ] //Create Polygon var poly = new google.maps.Polygon({ path: points, map: map, strokeColor: '#ff0000', strokeOpacity: 1, strokeWeight: 1, fillColor: '#ff0000', fillOpacity: 1 }); //poly changes color on mouseover google.maps.event.addListener(poly, 'mouseover', function() { poly.setOptions({ strokeColor: '#0000ff', fillColor: '#0000ff' }); }); //poly changes color back on mouseout google.maps.event.addListener(poly, 'mouseout', function() { poly.setOptions({ strokeColor: '#ff0000', fillColor: '#ff0000' }); }); 

Answer 1

You will probably have to create a custom overlay for the background, since you have more control over which layer of the map the overlay is applied to on the ground.

http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays

This is not necessarily a problem since I have not tried your code, but a good tactic is to use the Firebug html inspector to see how the shapes are marked, to see if there is anything that you can do with css / javascript to change their priority .