How can I make google map marker grow bigger when the mouseover it?

Question

In Google Map API v3, as the title, I only saw 2 types of animation in google map api, but I saw in some places the map marker animate like grow big when mouse over it? How to implement this?

Answer 1

Use marker's mouseover event handler and setIcon() method. You can use dynamic icons from google chart api for this purpose, and change the chld attribute to make the icon grow:

http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.5|0|FF8800|15|_|

http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.6|0|FF8800|15|_|

http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.7|0|FF8800|15|_|

Don't forget to set proper anchor point! For example:

marker.setIcon(new google.maps.MarkerImage(
    'http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.65|0|FF8800|15|_|',
    null,
    null,
    new google.maps.Point(11, 43) // this is the proper anchor point for scale 0.65
));

Answer 2

You could use your own image as a marker, then make use of the scaledSize property for the marker image to make it bigger when the mouseover event fires.

I don't know of a way to do this without doing some more complicated stuff like this.