CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsng-map
co len
co len

Reputation: 81

Ng-map-show all marker on map- how to calculate zoom level and center position

I use ng-map to load map and show marker as code below.

<ng-map center="[{{userpos.coords.latitude}},{{userpos.coords.longitude}}]" zoom="12" default-style="false">
        <div ng-repeat="p in points">
            <marker title="{{p.title}}" icon="{{getMarker(p.warning)}}"  position="{{p.latitude}}, {{p.longitude}}" ></marker>
        </div>
    </ng-map>

My problem is all marker can not be shown in map. To show all I must set zoom and center directive suitable. How to find them

Upvotes: 1

Views: 1495

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59348

In ngMap (1.10.0) has been introduced zoom-to-include-markers attribute for that purpose.

The example demonstrates how to center/zoom map to cover all visible markers

angular.module('ngMap').controller('MyCtrl', function($scope) {
  $scope.points =[
    {title: '', latitude: 40.71, longitude: -74.21},
    {title: '', latitude: 41.72, longitude: -73.20},
    {title: '', latitude: 42.73, longitude: -72.19},
    {title: '', latitude: 43.74, longitude: -71.18},
    {title: '', latitude: 44.75, longitude: -70.17},
    {title: '', latitude: 45.76, longitude: -69.16},
    {title: '', latitude: 46.77, longitude: -68.15}
  ];
  
});
<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script type="text/javascript" src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>

<div ng-app="ngMap" ng-controller="MyCtrl">
  <ng-map 
    zoom-to-include-markers="true">
    
    <div ng-repeat="p in points">
            <marker title="{{p.title}}" position="{{p.latitude}}, {{p.longitude}}" ></marker>
        </div>  
  </ng-map>
</div>

JSFiddle

More examples from ng-map repository

Upvotes: 3

Related Questions