title: Google Maps Zoom in on Marker with One Click Multiple Markers
body: <p>I have read a lot of other posts here on StackOverflow and in Google Search, and I still cannot get this to work correctly. I think it has something to do with my for loop.  I already set a mouseover event for the info windows, but what I want is for the map to zoom in on a marker when you click it and center it in the map.  I have tried:</p>
  
  <pre><code>google.maps.event.addListener(marker,'click',function(e) {
                  map.setZoom(9);
                  map.setCenter(e.latLng);
              });
  </code></pre>
  
  <p>Which has worked the best but still doesn't always center on the marker, especially after multiple clicks. Sometimes the marker is not even in view.</p>
  
  <p>The code snippet that I really wanted to use is this:</p>
  
  <pre><code>// add the double-click event listener
              google.maps.event.addListener(marker, 'dblclick', function(event){
                  map = marker.getMap();
  
                  map.setCenter(overlay.getPosition()); // set map center to marker position
                  smoothZoom(map, 12, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level
              })
  
  
              // the smooth zoom function
              function smoothZoom (map, max, cnt) {
                  if (cnt &gt;= max) {
                          return;
                      }
                  else {
                      y = google.maps.event.addListener(map, 'zoom_changed', function(event){
                          google.maps.event.removeListener(y);
                          self.smoothZoom(map, max, cnt + 1);
                      });
                      setTimeout(function(){map.setZoom(cnt)}, 80);
                  }
              }
  </code></pre>
  
  <p>Because it is suppose to have smooth zoom. However I can't get this one to work hardly at all. Most clicks on the markers go to Long Island NY or nowhere.</p>
  
  <p>My code follow:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
  &lt;style type="text/css"&gt;
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map-canvas { height: 100% }
  &lt;/style&gt;
  &lt;script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=(api)&amp;sensor=false"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  google.maps.visualRefresh = true;
  
  function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(42, -97),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
  
      var jobs = [
          ['Taylor', 'Texas', 30.570155, -97.409649, 'machine install and training'],
          ['Fort Riley', 'Kansas', 39.104172, -96.735558, 'machine install and training'],
          ['Toronto', 'Ontario, Canada', 43.653226, -79.383184, 'machine install and training'],
          ['Spokane', 'Washington', 47.658780, -117.426047, 'Machine install and training'],
          ['New Paris', 'Indiana', 41.504848, -85.826487, 'machine install'],
          ['Charleston', 'Mississippi', 34.00711, -90.055194, 'machine install and training'],
          ['Tinley Park', 'Illinois', 41.596405, -87.785119, 'training.'],
          ['Savannah', 'Georgia', 32.08078, -81.090719, 'machine install and training'],
          ['Long Island', 'New York', 40.852505, -73.135849, 'Machine install and training']
      ];
  
      var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  
      var infoWindow = new google.maps.InfoWindow;
  
          for (var i = 0; i &lt; jobs.length; i++) {
              var city = jobs[i][0];
              var state = jobs[i][1];
              var lat = jobs[i][2];
              var lng = jobs[i][3];
              var desc = jobs[i][4];
              var z = i;
              var myLatLng = new google.maps.LatLng(lat, lng);
  
              var content = '&lt;div class="map-content"&gt;&lt;h3&gt;' + city + ', ' + state +
                   '&lt;/h3&gt;' + desc + '&lt;/div&gt;';
  
              var marker = new google.maps.Marker({
                  map: map,
                  title: city + state,
                  position: myLatLng,
                  zIndex: z
              });
  
              google.maps.event.addListener(marker, 'mouseover', (function(marker, content) {
                  return function() {
                      infoWindow.setContent(content);
                      infoWindow.open(map, marker);
                  }
              })(marker, content));
  
              // add the double-click event listener
              google.maps.event.addListener(marker, 'dblclick', function(event){
                  map = marker.getMap();
  
                  map.setCenter(overlay.getPosition()); // set map center to marker position
                  smoothZoom(map, 12, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level
              })
  
  
              // the smooth zoom function
              function smoothZoom (map, max, cnt) {
                  if (cnt &gt;= max) {
                          return;
                      }
                  else {
                      y = google.maps.event.addListener(map, 'zoom_changed', function(event){
                          google.maps.event.removeListener(y);
                          self.smoothZoom(map, max, cnt + 1);
                      });
                      setTimeout(function(){map.setZoom(cnt)}, 80);
                  }
              }
          }
  }
  
    google.maps.event.addDomListener(window, 'load', initialize);
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="initialize()"&gt;
      &lt;div id="map-canvas"/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If I remove the code for attempting a zoom click event and take it out of the loop, it only works for my long island marker (since that is the last information in the array that is processed).  Any help on how to get this to center on the markers on click would be great.  I can't really find anything searching that has been implemented on arrays and loops.  I am new to the Google API, and I have only done basic Javascript on top of that. </p>
  
  <p>EDIT: <a href="http://commondatastorage.googleapis.com/affectdesignlab.appspot.com/maptest.html" rel="noreferrer">An example of this is here.</a></p>