ng-map default zoom is too zoomed in when used with zoom-to-include-markers="true"

Question

I'm trying to use the maps and I'm facing this case when I only have one marker and the zoom-to-include-markers="true", the result is that the map is too zoomed in no matter how I set the zoom attribute the result looks like this :

while what I would like for the first render to be should look something like this :

here is my code :

<ng-map
        ng-if="items"
        zoom="5"
        map-type-id="ROADMAP"
        pan-control="false"
        street-view-control="true"
        street-view-control-options="{position: 'RIGHT_BOTTOM'}"
        map-type-control="false"
        zoom-control="true"
        zoom-control-options="{style:'BIG', position: 'RIGHT_BOTTOM'}"
        scale-control="true"
        default-style="true"
        zoom-to-include-markers="true"
        class="map">

    <marker on-click="" data-ng-repeat="item in items" position="{{[item.latitude, item.longitude]}}">
    </marker>

</ng-map>

I tried to adjust the zoom attribute but it has no change on the map result.

UPDATE:

changing the zoom using setZoom() function in js is doing it, is there a way to calculate the suitable zoom according to the values that the map has?

Thanks

Vadim Gremyachev · Accepted Answer · 2016-10-13T07:51:40.557

For the case of a single marker you could specify maxZoom and minZoom properties to restrict map zoom level which will be displayed on the map.

Example

The example demonstrates how to set maxZoom via maximum-zoom attribute of map directive:

angular.module('mapApp', ['ngMap'])

  .controller('mapCntrl', function (NgMap, $scope) {
    $scope.items = [
      //{ id: 1, name: 'Oslo', latitude: 59.923043, longitude: 10.752839 },
      { id: 2, name: 'Stockholm', latitude: 59.339025, longitude: 18.065818 },
      //{ id: 3, name: 'Copenhagen', latitude: 55.675507, longitude: 12.574227 },
      //{ id: 4, name: 'Berlin', latitude: 52.521248, longitude: 13.399038 },
      //{ id: 5, name: 'Paris', latitude: 48.856127, longitude: 2.346525 }
    ];

    NgMap.getMap().then(function (map) {
      $scope.map = map;
    });

  });

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
 <script src="https://maps.googleapis.com/maps/api/js"></script>
 <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapCntrl">

  <ng-map maximum-zoom="14" ng-if="items" zoom="5" map-type-id="ROADMAP" pan-control="false" street-view-control="true" street-view-control-options="{position: 'RIGHT_BOTTOM'}"
   map-type-control="false" zoom-control="true" zoom-control-options="{style:'BIG', position: 'RIGHT_BOTTOM'}" scale-control="true"
   default-style="true" zoom-to-include-markers="true"  class="map">

   <marker on-click="" data-ng-repeat="item in items" position="{{[item.latitude, item.longitude]}}">
   </marker>

  </ng-map>

</div>

Update

Another option would be to force map to set zoom level once the map is ready. The point is that zoom-to-include-markers="true" sets the viewport which in turn sets zoom to maximum in case of a single marker. That's the reason why zoom="5" is getting ignored.

The following example shows how to to set zoom level with zoom-to-include-markers="true":

NgMap.getMap().then(function (map) {
  map.setZoom(12);
});

Demo

angular.module('mapApp', ['ngMap'])

  .controller('mapCntrl', function (NgMap, $scope) {
    $scope.items = [
      //{ id: 1, name: 'Oslo', latitude: 59.923043, longitude: 10.752839 },
      //{ id: 2, name: 'Stockholm', latitude: 59.339025, longitude: 18.065818 },
      //{ id: 3, name: 'Copenhagen', latitude: 55.675507, longitude: 12.574227 },
      //{ id: 4, name: 'Berlin', latitude: 52.521248, longitude: 13.399038 },
      { id: 5, name: 'Paris', latitude: 48.856127, longitude: 2.346525 }
    ];

    $scope.maxZoomForSinglePOI = 17;

    NgMap.getMap().then(function (map) {
      if(map.getZoom() > $scope.maxZoomForSinglePOI){
         map.setZoom($scope.maxZoomForSinglePOI);
      }
    });

  });

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
 <script src="https://maps.googleapis.com/maps/api/js"></script>
 <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapCntrl">

  <ng-map ng-if="items" zoom="5" map-type-id="ROADMAP" pan-control="false" street-view-control="true" street-view-control-options="{position: 'RIGHT_BOTTOM'}"
   map-type-control="false" zoom-control="true" zoom-control-options="{style:'BIG', position: 'RIGHT_BOTTOM'}" scale-control="true"
   default-style="true" zoom-to-include-markers="true"  class="map">

   <marker on-click="" data-ng-repeat="item in items" position="{{[item.latitude, item.longitude]}}">
   </marker>

  </ng-map>

 </div>

that's correct but the maximum zoom will prevent the user from zooming the map it self, which is not the behaviour I'm looking for, As mentioned in the question it's the first render of the box that I'm aiming to fix but without adding limitations on the user. — sisimh, Oct 12 '16 at 22:54
okay so now we're in synch @Vadim Gremyachev , back to my question of how to calculate this zoom that I can set with js? that it won't be too zoomed in? — sisimh, Oct 13 '16 at 07:30
@sisimh, what does this phrase means precisely _won't be too zoomed in_ ? Like i mentioned for a single poi the **zoom will be set to maximum level**. So, in that case you could introduce let' say `max allowed zoom level` as demonstrated in the updated answer (see the second demo) — Vadim Gremyachev, Oct 13 '16 at 07:50
I mean that it is zoomed to a level where the map is blank and shows nothing, as mentioned before that max allowed zoom level will prevent the user from zooming and I have dynamic locations I can not tell what is the maximum zooming. — sisimh, Oct 17 '16 at 08:33
@sisimh, the second example (under update section) shows another way of setting zoom level — Vadim Gremyachev, Oct 17 '16 at 08:56

ng-map default zoom is too zoomed in when used with zoom-to-include-markers="true"

1 Answers1