title: Google Maps Javascript - Make Marker Bounce
body: <p>I have been playing around with Google Maps javascript and was hoping someone could help me make my markers bounce. I have an array of markers, and am hoping that onmousehover of a link, div or heading(h1) I can make a particular marker bounce.</p>
  
  <pre><code>function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 11,
          center: {
              lat: -37.800426,
              lng: 145.038494
          }
      });
      setMarkers(map);
  }
  
  // Data for the markers consisting of a name, a LatLng and a zIndex for the
  // order in which these markers should display on top of each other.
  
  var stores = [
      ['A', -37.771624, 144.888128, 1],
      ['B', 37.843956, -144.994875, 2],
      ['C', -37.818086, 144.995699, 3],
      ['D', 37.812697, -145.229200, 4],
  ];
  
  function setMarkers(map) {
      // Adds markers to the map.
      for (var i = 0; i &lt; stores.length; ++i) {
          var store = stores[i];
          var marker = new google.maps.Marker({
              position: {
                  lat: store[1],
                  lng: store[2]
              },
              map: map,
              animation: google.maps.Animation.DROP,
              title: store[0],
              zIndex: store[3],
          });
          attachStoreTitle(marker);
      }
  }
  
  // Attaches an info window to a marker with the provided message. When the
  // marker is clicked, the info window will open with the secret message.
  function attachStoreTitle(marker, storeName) {
      var infowindow = new google.maps.InfoWindow({
          content: marker.title
      });
  
      marker.addListener('click',
          function() {
              infowindow.open(marker.get('map'), marker);
          });
  }
  </code></pre>
  
  <p>The other main problem I'm having with the listener's is calling the right marker, considering all the data is in an array.</p>