The default zoom setting for ng-map is overly magnified when paired with the zoom-to-include-markers="true" feature

Question

The default zoom setting for ng-map is overly magnified when paired with the zoom-to-include-markers="true" feature

When using maps, I encountered an issue where having only one marker with the zoom-to-include-markers="true" attribute resulted in the map being overly zoomed in. Regardless of how I adjusted the zoom attribute, the result looked like this: https://i.sstatic.net/PtEvy.png

For the initial render, I would prefer it to look more like this:

https://i.sstatic.net/HmVwX.png

Below is the code snippet:

<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 attempted to adjust the zoom attribute, but it had no effect on the map result.

UPDATE:

In JavaScript, changing the zoom using the setZoom() function is effective. Is there a method to calculate the appropriate zoom based on the map's values?

Thank you

javascript angularjs google-maps angularjs-directive ng-map

Answer 1

Answer №1

When dealing with a single marker, you have the option to define the maxZoom and minZoom properties to constrain the zoom level displayed on the map.

Illustration

An example showcasing how to set maxZoom using the maximum-zoom attribute of the 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>

Enhancement

Another approach would be to specify the zoom level after the map is considered ready. Using zoom-to-include-markers="true" sets the viewport, thus setting the zoom to maximum when there's a solitary marker. Hence, the specified zoom="5" doesn't take effect.

The subsequent instance demonstrates how to establish the zoom level with zoom-to-include-markers="true":

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

Demonstration

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>

Answer 2

When dealing with a single marker, you have the option to define the maxZoom and minZoom properties to constrain the zoom level displayed on the map.

Illustration

An example showcasing how to set maxZoom using the maximum-zoom attribute of the 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>

Enhancement

Another approach would be to specify the zoom level after the map is considered ready. Using zoom-to-include-markers="true" sets the viewport, thus setting the zoom to maximum when there's a solitary marker. Hence, the specified zoom="5" doesn't take effect.

The subsequent instance demonstrates how to establish the zoom level with zoom-to-include-markers="true":

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

Demonstration

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>

The default zoom setting for ng-map is overly magnified when paired with the zoom-to-include-markers="true" feature

Answer №1

Similar questions

experiencing a problem with the scrollTo() function

The Node.js POST request is unexpectedly returning 'undefined'

Compilation failure due to Typescript initialization issue

Easily modify and manage state on-the-fly using TextFields

Transform JavaScript AJAX to HttpWebRequest implementation code

What is the best way to fix character encoding issues with native JSON in Internet Explorer 8

Invoke the function defined within a modal when dismissing a ui-bootstrap modal

Accessing properties in JavaScript using square brackets

What are alternative methods for sharing data between sibling components in Angular other than $scope?

"Exploring the world of arrays and looping in

PHP: variables malfunctioning post implementation of "if" statement

Guide on fetching user information (such as picture and name) from Google Cloud Endpoints using AngularJs upon page initialization

jQuery carousel displaying a blank slide at the conclusion

Jquery animate - callback is triggered before animation finishes running

The Route.get() function in Node.js is expecting a callback function, but instead received an unexpected object of type

Discover a specific segment of the pie chart

There is a method in TypeScript called "Mapping IDs to Object Properties"

Experimenting with an Angular controller while maintaining its dependency integrity without the use

Ways to retrieve a file from a specific location using fetch/axios?

Monitoring and recording user's browsing activities while excluding server-side scripting