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

Answer 1

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>