Markers move when I make zoom out using ng-map and angularjs

Question

I am using ngmap and angularjs to create markers in google map. All ok, but when I zoom out in the map the markers move.

My Code:

 var app = angular.module('dataview', ['ngMap'])
    app.controller('DataViewCtrl', function($scope, $http)
    {
      $scope.markers=[{lat:30.2817, lng:-81.5273},{lat:30.6824, lng:-81.9680},{lat:31.0004, lng:-82.1580}];

      $scope.mapcenter={lat:$scope.markers[0].lat, lng:$scope.markers[0].lng};
    }

<script src = 'http://maps.google.com/maps/api/js?v=3&sensor=true'></script>
 <script src = '/assets/vendor/ngmap/build/scripts/ng-map.min.js'></script>
    <map center="{{mapcenter.lat}}, {{mapcenter.lng}}" zoom="5" ng-if="is_map" style="height: 500px;">
        <marker ng-repeat="pos in markers" position="{{pos.lat}}, {{pos.lng}}"></marker>
    </map>

Resul OK

Bad Resul (when zoom out)

score 2 · Answer 1 · answered Sep 23 '15 at 10:31

2

I had the same problem and I suppose you put the minimum code for the example. In my case, the problem was in SVG images of marker icons. I solved the problem by changing the images by others. Try default icons to test if you have the same problem.

answered Sep 23 '15 at 10:31

user5367285

21
2

Ben Smith · Answer 2 · 2015-09-07T00:02:46.660

1

A working example of what you are trying to achieve is here:

http://plnkr.co/edit/P5Tlui

Note how the markers position is now maintained when you zoom out.

I fixed the issue by assigning the markers' coordinates as following:

$scope.markers = [{
    lat: 30.2817,
    lng: -81.5273
  }, {
    lat: 30.6824,
    lng: -81.9680
  }, {
    lat: 31.0004,
    lng: -82.1580
  }];

edited Sep 07 '15 at 00:02

answered Sep 06 '15 at 23:01

Ben Smith

19,589
6
65
93

Not really understand, I see no difference between the way I defined $scope.markers and this. Both are an array of objects of the form {lat, lng} – maikelm Sep 09 '15 at 21:13
What you had was incorrect. You cannot pass in an array of objects to initialise your markers array like that. You use strings or keys within the angular brackets for retrieving items from the array. You need to assign the array as I did. See [here](http://www.w3schools.com/js/js_arrays.asp) – Ben Smith Sep 09 '15 at 21:34
you say ($scope.markers =), include the equal sign. Its correct. In my code i use =. it was a mistake when i ask the question. – maikelm Sep 09 '15 at 21:51
Ok, I've updated the code in your question. Is this what you have? Does the example I've written work for you? What browser are you using? – Ben Smith Sep 09 '15 at 22:04
Your example are fine. I do the same and all is ok. My code is executed inside other system. I think that the problem is some include of this parent proyect that affect this function – maikelm Sep 10 '15 at 13:32
Sounds like a nightmare :( The community here might be able to help further if you provide more information in your question e.g. about the parent project and other system. – Ben Smith Sep 10 '15 at 14:42

score 0 · Answer 3 · answered Sep 23 '15 at 16:17

0

For some reason, In css file I put

canvas{width: 100% !important; height: 360px !important;}

I remove this line and fixed the problem. cavas style to conflict with height defined for map in html

answered Sep 23 '15 at 16:17

maikelm

403
6
30

Markers move when I make zoom out using ng-map and angularjs

3 Answers3