title: Setting map bounds for multiple markers
body: <p>I am trying to set bounds for a group of markers, but keep getting an entire earth map. I have checked and all my markers have proper coordinates set. Here's my code in it's entirety:</p>
  <p>PHP</p>
  <pre><code>foreach ($business AS $b) {
          $mapData .= '[&quot;'.$b-&gt;name.'&quot;, '.$b-&gt;lat.', '.$b-&gt;lon.', '.$cnt++.', '.($b-&gt;ID != '' ? 1 : 0).'],';
          $avgLat = $avgLat + $b-&gt;lat;
          $avgLon = $avgLon + $b-&gt;lon;
          $cntEnrolled = $cntEnrolled +1;
      }
  }
  
  $mapData = rtrim($mapData, &quot;,&quot;);
  $avgLat = $avgLat / $cntEnrolled;
  $avgLon = $avgLon / $cntEnrolled;
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;div id=&quot;map&quot; class=&quot;pad0 mar0 w100p&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>JS</p>
  <pre><code>&lt;script&gt;                      
      function initMap() {
            var map = new google.maps.Map(document.getElementById(&quot;map&quot;), {
              zoom: 14,
              mapTypeControl: false,
              center: {
                  lat: '.$avgLat.', 
                  lng: '.$avgLon.'
              }
            });                        
            setMarkers(map);
      }
        
      var restaurants = ['.$mapData.'];
          
      function setMarkers(map) {
          
          var bounds = new google.maps.LatLngBounds();            
            
          for (var i = 0; i &lt; restaurants.length; i++) {
              var restaurant = restaurants[i];
              var layerposit = (restaurant[4] == 1 ? 999  : restaurant[3]);
              var marker = new google.maps.Marker({
                  position: {
                      lat: restaurant[1], 
                      lng: restaurant[2]
                  },
                  map: map,           
                  title: restaurant[0],
                  zIndex: layerposit
              });
              bounds.extend(marker.getPosition());
          }
          map.fitBounds(bounds);
      }
  &lt;/script&gt;
  &lt;script src=&quot;https://maps.googleapis.com/maps/api/js?key=AIzaSyBQo-k5Tta6adY9AuEi1afno8HKvac_WoQ&amp;callback=initMap&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>And here's what is rendered:
  <a href="https://i.stack.imgur.com/Ir0Cc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ir0Cc.png" alt="enter image description here" /></a></p>
  <p>What am I missing?</p>