CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsangularjs-directiveng-map
sisimh
sisimh

Reputation: 1337

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

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 : enter image description here

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

enter image description here

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

Upvotes: 7

Views: 4580

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59348

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>

Upvotes: 6

Related Questions