How to highlight the area in google map on mouse hover

Question

I want to implement a feature in my app (gmap powered) to highlight the area on mouse over. Much like the functionality in wikimapia. Check out the pic or url

But i could't find any info on how to do this. I believe we need to have the shape info of every location to highlight the are, but i dont know how to do. can some one help me out.

Cheers

Answer 1

You can load a kml file containing your polygons or create theme dynamically with the help of the Polygon class.

Here is an example of creating a polygon but the simplest way is loading a kml file. Just be sure your Kml file is under the file size limit (which can change at any time).

By default on the given example, I guess fill color is transparent, that's why it is invisible. And it get the highlight color by register events on mouse over.

You can then add listeners to your object on mouseover/mouseout like so :

google.maps.event.addListener(object,"mouseover",function() {
   // your code
});

Here comes an example on polylines but it can be done the same way on polygons.