title: Google places API place multiple markers on the map and zoom to where most markers are
body: <p>First I want to show you what solutions I have already tried, so you guys don't use them either:</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/10688509/placing-multiple-markers-on-google-map-from-array">placing multiple markers on google map from array</a>.</li>
  <li><a href="http://www.dreamdealer.nl/tutorials/placing_multiple_markers_on_a_google_map.html" rel="nofollow noreferrer">placing multiple markers on a google map</a>.</li>
  </ol>
  
  <p>As I have the following loop through the places:</p>
  
  <pre><code>service.textSearch({query:query}, function(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
          //for each result in results.length ++
          for (var i = 0; i &lt; results.length; i++) {
              //here I'm just setting the names from the variables into a list, to display the names as I show in (Figure 1).
              var item = document.createElement('li');
              item.appendChild(document.createTextNode(results[i].name));
              document.getElementById('results').appendChild(item);
  
              //here I set my variables that are necessary for the markers to work
              p_id[i] = results[i].place_id;
  
              lat[i] = results[i].geometry.location.lat();
              lng[i] = results[i].geometry.location.lng();
  
              //here I initialize the map with the given values.
              initMap(p_id, lat, lng, i);
          }
      }
  });
  </code></pre>
  
  <hr>
  
  <p><b>Figure 1: </b>
  <a href="https://i.stack.imgur.com/qvGrn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qvGrn.png" alt="Figure 1"></a></p>
  
  <hr>
  
  <p>As this loop completes it goes to where it places the markers on the map.</p>
  
  <p><b>Note:</b> I don't want to get rid of the <code>places</code> that it creates again, as it's very useful for me to have, plus it doesn't seem to obstruct what I try to make.</p>
  
  <p>As for the marker placer on the map itself:</p>
  
  <pre><code>function initMap(p_id, lat, lng, i) {
      //this creates the position of the map
      var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: lat[i], lng: lng[i]},
          zoom: 13
      });
  
      var infowindow = new google.maps.InfoWindow(), marker, i;
      var service = new google.maps.places.PlacesService(map);
  
      var marker;
  
      //gets the details of the placeid over again
      service.getDetails({
          placeId: p_id[i]
      }, function(place, status) {
          if (status === google.maps.places.PlacesServiceStatus.OK) {
  
              //this is where the marker is created with position and animation
              marker = new google.maps.Marker({
                  animation: google.maps.Animation.DROP,
                  position: new google.maps.LatLng(lat[i], lng[i]),
                  map: map
              });
  
              //this is the info if you click the marker
              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                  return function() {
                      infowindow.setContent('&lt;div&gt;&lt;strong&gt;' + place.name + '&lt;/strong&gt;&lt;br&gt;' + 'Place ID: ' + place.place_id + '&lt;br&gt;' + place.formatted_address + '&lt;/div&gt;');
                      infowindow.open(map, marker);
                  }
              })(marker, i));
          }
      });
  }
  </code></pre>
  
  <p>Strangely enough if there's only 1 place, then 1 marker shows up, but when they have more places, then there are no markers at all... as I show in <b>Figure 2</b></p>
  
  <hr>
  
  <p><b>Figure 2: </b>
  <a href="https://i.stack.imgur.com/5sLqF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5sLqF.png" alt="Figure 2"></a></p>
  
  <hr>
  
  <p>If anyone has any clues to solve it, please tell them. I can't seem to figure it out myself sadly, though I have been searching for a while now. I tried to make a Jsfiddle, but sadly the API is not able to run on jsfddle...</p>
  
  <hr>
  
  <p><b>EDIT: </b></p>
  
  <p>The multiple marker problem was solved by <a href="https://stackoverflow.com/users/1410567/seankendle">SeanKendle</a>. The problem was like I already suspected that I kept creating multiple maps...</p>
  
  <p>I simply moved the <code>maps</code> out of my <code>mapinit</code> function and placed it above my <code>service</code> in the <code>getPlaces</code> function like this:</p>
  
  <pre><code>var map = new google.maps.Map(document.getElementById('map'), {
      center: latlng,
      zoom: 5
  });
  
  service = new google.maps.places.PlacesService(
    document.getElementById('attributions') //attributions-container
  );
  
  //send a query
  service.textSearch({query:query}, function(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i &lt; results.length; i++) {
              var item = document.createElement('li');
              item.appendChild(document.createTextNode(results[i].name));
              document.getElementById('results').appendChild(item);
  
              p_id[i] = results[i].place_id;
  
              lat[i] = results[i].geometry.location.lat();
              lng[i] = results[i].geometry.location.lng();
  
              initMap(p_id, lat, lng, i, map);
          }
      }
  });
  </code></pre>
  
  <hr>
  
  <p>Now the last problem I'm facing is that I need to zoom in at the place with the most markers. Now I just simply set the lat and long where it should start as this:</p>
  
  <pre><code>var latlng = new google.maps.LatLng(20.540221, -4.042969);
  </code></pre>
  
  <p>Already thanks in advance!</p>
  
  <hr>