angularjs - Angular google map marker -

i add google map marker on load marker set center,

but when user change zoom or move right left map, marker position change , marker move center , not same of coords add on page load

this code:

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="false" options="options">         <ui-gmap-marker idkey="'1'"  coords='map.center'         icon='{url:    "//developers.google.com/.../beachflag.png" }'>              <ui-gmap-window isiconvisibleonclick="true">                             <p ng-cloak>marker clicked!</p>              </ui-gmap-window>          </ui-gmap-marker>  </ui-gmap-google-map> 

this map object

my problem same here: https://stackoverflow.com/questions/31113161/angular-google-map-marker-position-not-fixed-moving-when-map-moves-how-to-make

how can add marker fixed on place , if user move left right or zoom map marker stay on same original coords.

thanks

your problem ui-gmap-marker coords attribute reference map.center, changes whenever move map. you'll want have own controller variable marker, has own location attribute. this,

controller:

// map initialization $scope.map = { center: { latitude: 32.0889, longitude: 34.8357 }, zoom: 16};  // give marker own scope variable, can attach other info here, $scope.marker = {coords: angular.copy($scope.map.center)} 

html:

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="false" options="options">     <ui-gmap-marker idkey="'1'"  coords='marker.coords'         icon='{url:    "//developers.google.com/.../beachflag.png" }'>         <ui-gmap-window isiconvisibleonclick="true">             <p ng-cloak>marker clicked!</p>         </ui-gmap-window>     </ui-gmap-marker> </ui-gmap-google-map> 

edit: forgot angular.copy first. added plunkers demonstrating both broken , working behaviour.

broken: http://plnkr.co/edit/nkecroxm84v6levr85yi?p=preview

working: http://plnkr.co/edit/kvglseuktpo6fkqife89?p=preview