google map Marker update on clicking on Div

Question

I am new to google maps. right now I'm using ng-map with angularjs. I am finding it difficult to put animations on the makers (like bounce) when I click on a div. Can anybody tell me how can I do that?

Answer 1

I've written an example of how to animate a marker by clicking on a Div element (See the div under the map which has the text "Div element - Click me to toggle marker animation!"). It can be found here:

http://plnkr.co/edit/KATXex?p=preview

The code to animate the marker is as follows:

if (marker.getAnimation() !== null) {
  marker.setAnimation(null);
} else {
  marker.setAnimation(google.maps.Animation.BOUNCE);
}

Note that to get this to work properly I had to set the marker's animation property to null in the "on" event e.g.

$scope.$on('mapInitialized', function(evt, evtMap) {
 map = evtMap;

 var mapMarker =  map.markers[0];
 mapMarker.setAnimation(null);
 marker = mapMarker;
});

By default it is undefined, which means that without this step you'd normally have to click on the marker twice, once to set the animation to null, second to set the animation e.g. to BOUNCE. The issue with "undefined" may be an issue with the ng-maps library.