title: Google maps animate particular marker on click
body: <p>I have this google map code below where I added bounce animation on 'click' to the markers but when I click on any marker only the first marker is animated instead of that particular marker.</p>
  
  <p>I have tried a few answers but they don't seem to work.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  #map {
      height: 400px;
      width: 100%;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h3&gt;My Google Maps Demo&lt;/h3&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;script&gt;
  
      function initMap() {
          var locations = [
                    ['Bondi Beach', -33.890542, 151.274856, 4],
                    ['Coogee Beach', -33.923036, 151.259052, 5],
                    ['Cronulla Beach', -34.028249, 151.157507, 3],
                    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
                    ['Maroubra Beach', -33.950198, 151.259302, 1]
                  ];
          var map = new google.maps.Map(document.getElementById('map'), {
  
          zoom: 8,
                      //custom map styling
          styles: [
                      {elementType: 'geometry', stylers: [{color: '#ececec'}]},
                      {elementType: 'labels.text.stroke', stylers: [{color: '#000000'}]},
                      {elementType: 'labels.text.fill', stylers: [{color: '#000000'}]},
                      {
                          featureType: 'administrative.locality',
                          elementType: 'labels.text.fill',
                          stylers: [{color: '#ffffff'}]
                          },
                          {
                            featureType: 'poi',
                            elementType: 'labels.text.fill',
                            stylers: [{color: '#777777'}]
                          },
                          {
                            featureType: 'poi.park',
                            elementType: 'geometry',
                            stylers: [{color: '#bebdbd'}]
                          },
                          {
                            featureType: 'poi.park',
                            elementType: 'labels.text.fill',
                            stylers: [{color: '#a4a2a2'}]
                          },
                          {
                            featureType: 'road',
                            elementType: 'geometry',
                            stylers: [{color: '#38414e'}]
                          },
                          {
                            featureType: 'road',
                            elementType: 'geometry.stroke',
                            stylers: [{color: '#212a37'}]
                          },
                          {
                            featureType: 'road',
                            elementType: 'labels.text.fill',
                            stylers: [{color: '#9ca5b3'}]
                          },
                          {
                            featureType: 'road.highway',
                            elementType: 'geometry',
                            stylers: [{color: '#ffffff'}]
                          },
                          {
                            featureType: 'road.highway',
                            elementType: 'geometry.stroke',
                            stylers: [{color: '#1f2835'}]
                          },
                          {
                            featureType: 'road.highway',
                            elementType: 'labels.text.fill',
                            stylers: [{color: '#f3d19c'}]
                          },
                          {
                            featureType: 'transit',
                            elementType: 'geometry',
                            stylers: [{color: '#999999'}]
                          },
                          {
                            featureType: 'transit.station',
                            elementType: 'labels.text.fill',
                            stylers: [{color: '#777777'}]
                          },
                          {
                            featureType: 'water',
                            elementType: 'geometry',
                            stylers: [{color: '#cccccc'}]
                          },
                          {
                            featureType: 'water',
                            elementType: 'labels.text.fill',
                            stylers: [{color: '#e8e9ea'}]
                          },
                          {
                            featureType: 'water',
                            elementType: 'labels.text.stroke',
                            stylers: [{color: '#cccccc'}]
                          },
                          {
                              featureType: 'landscape.natural',
                              elementType: 'geometry',
                              stylers: [{color: '#000000'}]
                           }
  
                        ],
                      //map positioning and type    
                      center: new google.maps.LatLng(-33.92, 151.25),
                      mapTypeId: google.maps.MapTypeId.ROADMAP,
                      disableDefaultUI: true
                  });
                      var infowindow = new google.maps.InfoWindow();
  
                  var marker, i;
  
                  for (i = 0; i &lt; locations.length; i++) {  
  
                        marker = new google.maps.Marker({
                          animation: google.maps.Animation.DROP,
  
                          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
  
                          map: map,
  
                        });
                          //event listener for popup
                        google.maps.event.addListener(marker, 'click', (function(marker, i) {
                          return function() {
                            infowindow.setContent(locations[i][0]);
                            infowindow.open(map, marker);
                          }
                        })(marker, i));
  
                        //event listener for bounce animation
                        google.maps.event.addListener(marker, 'click', function() {
                              if (marker.getAnimation() != null) {
                                marker.setAnimation(null);
                              } else {
                                marker.setAnimation(google.maps.Animation.BOUNCE);
                              }
                            });
  
                  }
  
  
  
  
  
  
        }
  
  
  
  
      &lt;/script&gt; 
  &lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAwQB2GuZ2oDC2tP2A_6XwlEraV2Cyku3E&amp;callback=initMap"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>