google maps v3 API mouseover with polygons?

Question

I'm building a map using the google v3 api because it is way faster. Essentially, it's a map of an area with about 30 cities with polygons over the regions. When a user hovers over a city, I want the fillColor to get lighter, and then return to it's normal state on mouseout. when a user click, it redirects them to another page.

The click event works just fine. But, looking through the v3 API documentation, it seems as if Google has implemented click, doubleclick, mousemove, mousedown and mouseup as event triggers, but no hover, or mouseover, or mouseout.

Really? Geez. I'd think over and out would be higher priority than down and up.

Anyway, has anybody else come across this? Am I wrong? Or is there a workaround?

Thank you in advance for your help, Stephanie

Answer 1

Maps API V3 events are defined per object. Doing a search on the V3 reference page reveals that Marker is the only object with definitions for mouseover and mouseout. So yes, you appear to be correct.

By the way, there are people doing this, but it looks pretty involved:

http://groups.google.com/group/Google-Maps-API/browse_thread/thread/4ddc4f5888994563

Answer 2

mouseover and mouseout are now implemented in V3 Polyline.

Answer 3

In Google Maps API V3, I have a rollover for a polygon with the below code. I do not like that I have to unset and reset the map each rollover, but, at this point in time, this is how I achieved a mouseover.

I am interested in any comments on how to improve this code.

var polyShape     = new google.maps.Polygon({paths:polyData,strokeColor:"#aa0",strokeOpacity:0.5,strokeWeight:1,fillColor:"#cc0",fillOpacity: 0.25});
var polyShapeOver = new google.maps.Polygon({paths:polyData,strokeColor:"#cc0",strokeOpacity:0.5,strokeWeight:1,fillColor:"#ff0",fillOpacity: 0.25}); 

polyShape.setMap(map);

google.maps.event.addListener(polyShape,"mouseover",function(){
  this.setMap(null);
  polyShapeOver.setMap(map);
}); 

google.maps.event.addListener(polyShapeOver,"mouseout",function(){
  this.setMap(null);
  polyShape.setMap(map);
});

Answer 4

The following works:

google.maps.event.addListener(polygon,"mouseover",function(){ this.setOptions({fillColor: "#00FF00"}); });

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