Search code examples
javascriptangularjsgoogle-mapsng-map

AngularJS ng-map set view position as rectangle coordinates


Do U know how can I i ng-map directive set position of ng-map view not as center="[40.74, -74.18]", but as rectangle - corner values of map view where i have 4 values [north, south, east, west]?

now i have something like that:

<ng-map zoom="11" center="[40.74, -74.18]" class="csiMap" default-style="false"></ng-map>

But I want rectangle, not center

Greetings rizon


Solution

  • fitBounds function is used to set the viewport to contain the given bounds, below is demonstrated how to utilize it with ng-map library.

    Example

    angular.module('mapApp', ['ngMap'])
      .controller('mapController', function ($scope, NgMap) {
    
        NgMap.getMap().then(function (map) {
          $scope.map = map;
          $scope.bounds = [47.0, 30.0, -80.0, -110.0];
    
    
          var southWest = new google.maps.LatLng($scope.bounds[1], $scope.bounds[3]);
          var northEast = new google.maps.LatLng($scope.bounds[0], $scope.bounds[2]);
          var bounds = new google.maps.LatLngBounds(southWest, northEast);
          map.fitBounds(bounds);
        });
    
      });
    <script src="https://maps.google.com/maps/api/js"></script>
    <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
    
    <div ng-app="mapApp" ng-controller="mapController">
        <ng-map zoom="4">
        </ng-map>
    </div>