AngularJS/NgMap - Recenter map as pin sets change

Question

I'm using AngularJS and NgMap to display a Google Map instance that displays a set of pins that is filtered up/down based upon location selections in 3 different select lists. As the focus gets tighter (from Region, to State/Province/EU Country, to City), I'd like the map zoom to get closer to the location.

I'm utilizing the zoom-to-include-markers tag in the map element, but when set to auto the zooming is erratic and often wrong, and using true the zooming never happens, although it does keep all the elements within the view.

Plunk: http://plnkr.co/edit/qaLFYD?p=preview

<div map-lazy-load="http://maps.google.com/maps/api/js">
  <map zoom="2" scrollwheel="false" zoom-to-include-markers="true">
    <span ng-repeat="site in (dataObject | ForMap : {region:selectRegion, state:selectState, city:selectCity}) track by $index" id="{{data.Id}}">
    <marker position="[{{site.Latitude}},{{site.Longitude}}]"></marker>
</span>
  </map>
</div>

score 1 · Answer 1 · answered Nov 14 '15 at 11:33

ngMap is not watching markers, this is why map viewport is not centered and zoomed (viazoom-to-include-markers property) once the markers are updated. But you could consider to update viewport and zoom explicitly. For that purpose lets introduce the following function:

$scope.zoomToIncludeMarkers = function(cities) {
      var bounds = new google.maps.LatLngBounds();
      cities.forEach(function(c) {
        var latLng = new google.maps.LatLng(c.pos[0],c.pos[1]);
        bounds.extend(latLng);
      });
      $scope.map.fitBounds(bounds);
      if(cities.length == 1){
         $scope.map.setZoom(5);
      }
  };

where cities has the following structure in my case:

$scope.cities = [
    {id: 1,name: 'Oslo', pos:[59.923043, 10.752839]},
    {id: 2,name: 'Stockholm',pos:[59.339025, 18.065818]},
    {id: 3,name: 'Copenhagen',pos:[55.675507, 12.574227]},
    {id: 4,name: 'Berlin',pos:[52.521248, 13.399038]},
    {id: 5,name: 'Paris',pos:[48.856127, 2.346525]}
  ];

So, every time once markers have been changed, we need to call:

$scope.zoomToIncludeMarkers($scope.cities);

Working example

angular.module('ngMap').controller('MyCtrl', function($scope) {

  
  $scope.selectedCities = [];
  $scope.cities = [
    {id: 1,name: 'Oslo', pos:[59.923043, 10.752839]},
    {id: 2,name: 'Stockholm',pos:[59.339025, 18.065818]},
    {id: 3,name: 'Copenhagen',pos:[55.675507, 12.574227]},
    {id: 4,name: 'Berlin',pos:[52.521248, 13.399038]},
    {id: 5,name: 'Paris',pos:[48.856127, 2.346525]}
  ];

  
  

  
  
  $scope.selectionsChanged = function(){
    $scope.selectedCities = [];
    $scope.selectedValues.forEach(function(cid){
       var city = $scope.cities.filter(function(c){ 
             if(c.id == parseInt(cid))
                return c;    
       })[0];
       $scope.selectedCities.push(city);
    });

    $scope.zoomToIncludeMarkers();
  };

  $scope.zoomToIncludeMarkers = function() {
      var bounds = new google.maps.LatLngBounds();
      $scope.selectedCities.forEach(function(c) {
        var latLng = new google.maps.LatLng(c.pos[0],c.pos[1]);
        bounds.extend(latLng);
      });
      $scope.map.fitBounds(bounds);
      if($scope.selectedCities.length == 1){
         $scope.map.setZoom(5);
      }
  };

});

<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="http://code.angularjs.org/1.2.25/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="ngMap" ng-controller="MyCtrl">   
   <h2>Select cities:</h2>
   <select multiple ng-model="selectedValues" ng-change="selectionsChanged()">
        <option ng:repeat="c in cities" selected value="{{c.id}}">{{c.name}}</option>
    </select>

    <!--tt> selectedValues = {{selectedCities}}</tt-->

  <ng-map zoom="5" center="{{center}}"
    scrollwheel="false"
    zoom-to-include-markers="true">
    <marker ng-repeat="c in selectedCities"
      position="{{c.pos}}" title="{{c.name}}"></marker>
  </ng-map>
</div>

Plunker

AngularJS/NgMap - Recenter map as pin sets change

1 Answers1