ngMap Zoom based on the all the markers

Question

I have a scenario that i have to show all the markers on a Map. Im using angular-map im able to see all the markers but the zoom level is out of control. I was unable to restrict the zoom level it is showing three copies of map. I've created a plunker.

How can i show all the markers visible. can anyone please help me in this.

<map zoom-to-include-markers="auto" center="[{{ center.lat }}, {{ center.lng }}]">
    <marker position="[{{ center.lat }}, {{  center.lng }}]"></marker>
    <marker ng-repeat="result in results track by $index" position="[{{ result.lat }}, {{ result.lng }}]"></marker>
</map>

$scope.results = [
    {"lat":17.51081384,"lng":78.35414886},
    {"lat":17.49018563,"lng":78.39860916},
    {"lat":38.50795202,"lng":-121.503544},
    {"lat":38.50795044,"lng":-121.50354534},
    {"lat":38.50794677,"lng":-121.50354065},
    {"lat":40.75376321,"lng":-73.9868018},
    {"lat":68.39918004,"lng":101.6015625},
    {"lat":17.4140375,"lng":78.40826511},
    {"lat":17.5124509,"lng":78.37766647},
    {"lat":17.36538432,"lng":78.55173111},
    {"lat":17.40805893,"lng":78.4905982},
    {"lat":17.51048643,"lng":78.35294724},
    {"lat":17.51277831,"lng":78.35483551},
    {"lat":17.41845987,"lng":78.49113464},
    {"lat":82.58610635,"lng":-31.9921875},
    {"lat":-20.30341752,"lng":-56.77734375},
    {"lat":27.05912578,"lng":2.28515625}
];

Answer 1

You can not avoid google maps repeating -> there is no solution for this because it is a feature of google maps.

It's depending on the map resolution. Here is a plunker with a small map in including a different format. The repeating is a Google Maps feature. You can try to force the format of the map so the repeating is not showing up. Remember the user will always be able to see the repeated map by scrolling to east or west.

<div style="width:250px;height:100px">
  <map zoom-to-include-markers="auto" center="[{{ center.lat }}, {{ center.lng }}]">
    <marker position="[{{ center.lat }}, {{  center.lng }}]"></marker>
    <marker ng-repeat="result in results track by $index" position="[{{ result.lat }}, {{ result.lng }}]"></marker>
  </map>
</div>