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
It gives us a sense of the scale that a map is supposed to be viewed at. Maps with a large scale (i.e. zoomed in, for example a scale of 1:100) show more detail and are more accurate while maps with a small scale (zoomed out, for example 1:1 million) show a large area but are not as accurate.
Users can zoom the map by clicking the zoom controls. They can also zoom and pan by using two-finger movements on the map for touchscreen devices.
Step 1 Go to Add or Edit Map page . Step 2 Select 'Default zoom level' in the 'Map Information section'. Step 3 click save map and see the changes.
The shortcut is simple: just double-tap the maps interface, but instead of lifting your finger after the second tap (the shortcut for zooming in), you leave it touching the screen. Then a swipe up zooms out, and a swipe down zooms in.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With