user2668812 user2668812 - 3 months ago 33
Javascript Question

google maps v3 API mouseover with GeoJson polygon layer

How to get the mouseover event to work with google maps Api V3 on Polygon shapes ?

I cannot get the event to fire on mouseover.

var data_layer25 = new google.maps.Data({ map: map });
data_layer25.loadGeoJson('http://example.com/Assets/GeoJson/USA-MO.GeoJson');
data_layer25.setStyle({
fillColor: ' #808000 ',
strokeWeight: 1
});
google.maps.event.addListener((data_layer25), "click", function () { window.location = "/RepTerritory/index/9" });
google.maps.event.addListener((data_layer25), "mouseover", function () {
this.setOptions({ fillColor: "#00FF00" });
});

google.maps.event.addListener((data_layer25), "mouseout", function () {
this.setOptions({ fillColor: "#FF0000" });
});
data_layer25.setMap(map);

Answer

Try to use this to change the style of Data Layers on mouse events:

data_layer25.addListener('mouseover', function(e) {
     data_layer25.setStyle({
         fillColor: "#00FF00"
     });
});

data_layer25.addListener('mouseout', function(e) {
     data_layer25.setStyle({
         fillColor: "#FF0000"
     });
});