title: Angular Google Maps - automatically set 'center' and 'zoom' to fit in all markers
body: <p>I have a dynamically generated list of markers within my Google Map. I want the map's center to be the center of all the markers and zoomed out just enough so that all markers are in view.</p>
  
  <p>In terms of calculating the map center, perhaps this could be possible by iterating through all the latitudes and longitudes and finding the central point. However, I cannot figure out the best way to calculate what the zoom should be.</p>
  
  <p>Is this possible to achieve?</p>
  
  <p>My map is being used in the template like this:</p>
  
  <pre><code>&lt;ui-gmap-google-map events="map.events" center="map.center" zoom="map.zoom" draggable="true" options="options"&gt;
      &lt;ui-gmap-marker ng-repeat="home in filteredHomes = (resCtrl.filteredHomes | orderBy : $storage.params.orderby : $storage.params.reverseOrder)" coords="{latitude: home.location.latitude, longitude: home.location.longitude}" idkey="home.homeId"&gt;
      &lt;/ui-gmap-marker&gt;
  &lt;/ui-gmap-google-map&gt;
  </code></pre>
  
  <p><strong><em>UPDATE</em></strong></p>
  
  <p>Attempted Angular implementation from advice from @Tiborg:</p>
  
  <pre><code>uiGmapGoogleMapApi.then(function(maps) {
      $scope.map = {
          center: $scope.$storage.params.views.map.location,
          zoom: $scope.$storage.params.views.map.zoom,
          events: {
              click: function() {
                  var bounds = new google.maps.LatLngBounds();
                  for (var i in $scope.filteredHomes) {
                      bounds.extend($scope.filteredHomes[i].location);
                  }
                  $scope.map.fitBounds(bounds);
              }
          }
      };
  });
  </code></pre>
  
  <p>This produces the console error: <code>TypeError: undefined is not a function (evaluating 'a.lat()')</code></p>