适用于 Google Maps API v3 的可扩展地图标记叠加

Question

I have been using Google Maps API v3 for a long time now. I want to create an expandable google maps marker for using with my map. I have been using map markers similar to the one in the image below:-

What I want to do is that when I hover on this marker on my map, it should expand and show the marker description, similar to the image below -

And the marker should go back to the first image, ie, normal image when hovered out. It should be fairly simply to do this, however, I have no idea where and how to start. Any help will be really appreciated.

Answer 1

You can use marker.setIcon on mouseover and mouseout :

google.maps.event.addListener(marker, 'mouseover', function() {
    marker.setIcon('http://i.stack.imgur.com/t7vAK.png');
});
google.maps.event.addListener(marker, 'mouseout', function() {
    marker.setIcon('http://i.stack.imgur.com/TrIat.png');
});

Demo: http://jsfiddle.net/mzu2qte5/2/

The small issue with this solution is that arrow of the 'Hello World' icon should be placed in the middle of the icon, instead moved to left, as it is now.

That way you loose 'expand' effect.