ngMap center is not working properly in angularjs

Question

I am using ngMap in angular for google map integration.

below are my html code

<map ng-transclude class='google-map' center="map.center"> 
    <marker position="marker.position" options="marker.options"></marker>
</map>

my controller code is

//response get from server side 
var onResponse = function(response){
    $scope.workshop = response;
    mapCenter(response.latitude, response.longitude);

};

function mapCenter(latitude, longitude) {

    $scope.map = {
      center: [latitude, longitude]
    };

    $scope.marker = {
      position: [latitude, longitude],
      options: function(){
        return {
          draggable: true
        }
      }
    };

};

In this case map is display but center of map is not display properly it gets to the right side.

If I put below code outside function with dummy lat and long then it's working fine but I can't get dynamic lat and long value outside this function that's why I need to put this code in function.

$scope.map = {
          center: [18.9750, 72.8258]
        };

Please help me for solution.

Shaishab Roy · Answer 1 · 2016-02-04T12:04:37.177

1

you can check it

center="{{map.center}}"

and set your data in $timeout function. may be angular digest problem if your latitude, longitude perfect

$timeout(function() {
    $scope.map = {
      center: [latitude, longitude]
    };
});

edited Feb 04 '16 at 12:04

answered Feb 04 '16 at 11:51

Shaishab Roy

16,335
7
50
68

I tried with center="map.center" as well as center="{{map.center}}" but not work for me – Dipak Dendage Feb 04 '16 at 11:55
check your `response.latitude` and `response.longitude` values – Shaishab Roy Feb 04 '16 at 11:58
yes I checked everything is all right. Problem with scope when I declare scope.map outside function with dummy data then it's working. – Dipak Dendage Feb 04 '16 at 12:01
please how can I calculate the center dynamically if I'm displaying a polygon on the map? – Ne AS May 05 '17 at 16:15

score 0 · Answer 2 · answered Feb 04 '16 at 12:21

actually you are overwriting our $scope.map.

Please update

function mapCenter(latitude, longitude) {

                $scope.map.center =[latitude, longitude];
                $scope.marker.position = [latitude, longitude];
            };

Also use dorebuildall="true" propeprty

ngMap center is not working properly in angularjs

2 Answers2