3

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}
];

enter image description here

lin
  • 17,956
  • 4
  • 59
  • 83
Mohan Reddy Guntaka
  • 71
  • 1
  • 7

1 Answers1

2

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>
Community
  • 1
  • 1
lin
  • 17,956
  • 4
  • 59
  • 83
  • Thanks for the answer @lin I tried this but is there any other way to overcome this problem. I want to display map without repeating. – Mohan Reddy Guntaka Dec 14 '16 at 16:31
  • Its not possible with google maps, its a feature. You will agree to my answer when the time comes :) – lin Dec 14 '16 at 16:32
  • I tried by setting Zoom levels and using some events. Somehow i think it is possible but i don't know exact solution. im keep in trying. Please let me know if you found any solution Thank you @lin :) – Mohan Reddy Guntaka Dec 14 '16 at 17:23
  • There is none, let the internet know when have a solution. Millions of people would be happy about that. If you dont find a solution, dont forget to mark my answer as right :) cheers – lin Dec 14 '16 at 17:26
  • definitely @lin :) – Mohan Reddy Guntaka Dec 14 '16 at 17:59
  • I realised that the question you understood is wrong or may be i didnt explained properly. I'm fine with the repeating map when dragging but at a time is it possible to show only one map. If you see my map you can increase the zoom level to display only one map. i want that behaviour by default. – Mohan Reddy Guntaka Dec 15 '16 at 04:47