CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3google-api
turboAtom
turboAtom

Reputation: 43

Google API V3: Problem with polygon mouseover events if groundOverlay is also defined

I am using Google API V3 and I want to have a ground overlay and on this overlay a polygon which changes color on mouseover. The mouseover event works fine as long as no ground overlay is defined. But if the ground overlay is present the the color does not change on mouseover.

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'
    });
});

Upvotes: 4

Views: 1742

Answers (1)

ScottE
ScottE

Reputation: 21630

Likely you'll have to create a custom overlay for the background, as you have more control over what map layer the ground overlay sits on.

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

This is not necessarily the issue as I haven't tried your code, but a good tactic is to use Firebug's html inspector to see how the shapes are marked up to see if there is anything you can do with css / javascript to change their precedence.

Upvotes: 1

Related Questions