CODEWITHSUNDEEP
javascriptajaxgoogle-maps
Steph Rose
Steph Rose

Reputation: 2136

google maps v3 API mouseover with polygons?

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

Upvotes: 26

Views: 35815

Answers (4)

Harmen Wessels
Harmen Wessels

Reputation: 466

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

Upvotes: 45

Christopher Altman
Christopher Altman

Reputation: 4896

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

Upvotes: 3

Rene Saarsoo
Rene Saarsoo

Reputation: 13917

mouseover and mouseout are now implemented in V3 Polyline.

Upvotes: 0

Andy West
Andy West

Reputation: 12499

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

Upvotes: 1

Related Questions