title: Angularjs - ng-map - Google Maps Javascript API v3 - how to Set best Zoom for Multiple markers
body: <p>I'm using <a href="https://github.com/allenhwkim/angularjs-google-maps" rel="nofollow noreferrer">ngMap</a>
  in an angularjs app.<br>
  I'm displaying google-map with multiple markers <code>onclick of Open map! button</code> and first address present in the addresses array im taking as map center.</p>
  
  <p>Here is <a href="http://plnkr.co/edit/GnMe83xGDF4pWxUzQz79?p=preview" rel="nofollow noreferrer">The Plunk</a></p>
  
  <p><strong>example.js:</strong>  </p>
  
  <pre><code>angular.module('plunker', ['ui.bootstrap', 'ngMap']);
  var ModalDemoCtrl = function ($scope, $modal, $log) {
  
      $scope.displayMap = function () {
  
          $scope.addresses = [{ "address": "Hyderabad" },
          { "address": "Chennai" },
          { "address": "Bangalore" },
          { "address": "Kolkata" },];
  
          $scope.latlng = [];
          $scope.loop(0, $scope.addresses)
      }
  
      $scope.loop = function (id, addressesresult) {
          if (id &lt; addressesresult.length) {
              var address = addressesresult[id].address;
              geocoder = new google.maps.Geocoder();
              geocoder.geocode({
                  'address': address
              }, function (results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                      $scope.latlng.push({
                          "lat": results[0].geometry.location.lat(),
                          "lng": results[0].geometry.location.lng(),
                          "title": results[0].formatted_address
                      });
  
                      if (id == ((addressesresult.length) - 1)) {
                          $scope.openPopup();
  
                      }
                  } else {
                      console.log('Geocode was not successful for the following reason:' + status);
                  }
                  id = id + 1;
                  $scope.loop(id, addressesresult);
              });
          }
      }
  
      $scope.openPopup = function () {
          var modalInstance = $modal.open({
              templateUrl: 'modal1',
              controller: ModalInstanceCtrl,
              scope: $scope,
              resolve: {
                  lat: function () {
                      return $scope.latlng[0].lat;
                  },
                  lng: function () {
                      return $scope.latlng[0].lng;
                  },
                  latlng: function () {
                      return $scope.latlng;
  
                  }
              }
          });
  
      };
  
  };
  
  // Please note that $modalInstance represents a modal window (instance) dependency.
  // It is not the same as the $modal service used above.
  
  var ModalInstanceCtrl = function ($scope, $modalInstance, lat, lng) {
  
      $scope.lat = lat;
      $scope.lng = lng;
  
      $scope.render = true;
  
      $scope.close = function () {
          $modalInstance.close();
      };
  };
  </code></pre>
  
  <p><strong>index.html:</strong>  </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="plunker"&gt;
  
  &lt;head&gt;
      &lt;script src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"&gt;&lt;/script&gt;
      &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"&gt;&lt;/script&gt;
      &lt;script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"&gt;&lt;/script&gt;
      &lt;script src="example.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div ng-controller="ModalDemoCtrl"&gt;
          &lt;script type="text/ng-template" id="myModalContent.html"&gt;
          &lt;div class="modal-header"&gt;
              &lt;h3 class="modal-title"&gt;I'm a modal!&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;map ng-if="$parent.render" center="[{{$parent.lat}}, {{$parent.lng}}]" zoom-control="true" zoom="8"&gt; &lt;/map&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button class="btn btn-primary" ng-click="ok()"&gt;OK&lt;/button&gt;
              &lt;button class="btn btn-warning" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
      &lt;/script&gt;
  
          &lt;button class="btn btn-default" ng-click="displayMap()"&gt;Open map!&lt;/button&gt;
  
          &lt;script type="text/ng-template" id="modal1"&gt;
          &lt;div class="modal-header googlemodal-header"&gt;
  &lt;button type="button" ng-click="close()" style="opacity:1" class="close" data-dismiss="modal" aria-hidden="true"&gt; &lt;span style="color:red; "&gt;x&lt;/span&gt; &lt;/button&gt;
              &lt;div align="center"&gt;&lt;h3 class="modal-title"&gt;Addresses pointing in Google Map  &lt;/h3&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;map ng-if="$parent.render" center="[{{lat}}, {{lng}}]"  zoom="15" zoom-control="true"  style="display:block; width:auto; height:auto;"&gt; 
                  &lt;marker ng-repeat="item in latlng" 
              position="{{item.lat}}, {{item.lng}}" 
              title="{{item.title}}"&gt;&lt;/marker&gt;
              &lt;/map&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer googlemodal-header"&gt;
              &lt;button class="btn btn-primary btn-sm" ng-click="close()"&gt;CLOSE&lt;/button&gt;
          &lt;/div&gt;
      &lt;/script&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>All address related markers are displaying fine.</p>
  
  <p>But how to set best zoom automatically for array of addresses, here these addresses i'm fetching from database, so these addresses changes for each request based on some condition. </p>