Google maps showing Uncaught Error: 10 $digest() iterations reached. Aborting!; angular app

Question

I am trying to create a map with angular app of mine to show the coordinates on the map. These coordinates are obtained from my api and is displayed on a detailed page. But the HTML code is giving me error:

Uncaught Error: 10 $digest() iterations reached. Aborting!

HTML:

<input  value="{{place.place.name}}">


<label>zoom</label>
<input type="number" ng-model="zoom"/>

<div id="map_canvas">
<google-map center="{latitude: place.place.lat,longitude: place.place.lng}" zoom="zoom" draggable="true" options="options">
  <marker coords="{latitude: place.place.lat,longitude: place.place.lng}"></marker>
</google-map>

</div>

All of this code is showing the above error. How can I fix this? below is my javascript, overall I have a list of places, then a user clicks on the place and the details of the place. The page also allows user to add a category to the page. So here is the whole Controller linking to the page where this map is located.:

 $http.get('http://94.125.132.253:8000/getuncategorisedplaces').success(function (data, status, headers) {

    $scope.places = data;
    console.log(data);
    $scope.message = 'Uncategorised places';
})
$scope.id = $routeParams.id;
$scope.showplace = function(id) {
  $http({method: 'GET', url: 'http://94.125.132.253:8000/getitemdata?ID=' + $scope.id}).
      success(function(data, status, headers, config) {
          $scope.place = data;               //set view model
          console.log(data);

          console.log(id);

           $scope.view = 'templates/detail.html';

      })
      .error(function(data, status, headers, config) {
          $scope.place = data || "Request failed";
          $scope.status = status;
          $scope.view = 'templates/detail.html';
      });
   }
  $scope.showplace();


      $scope.map = function(){

 $scope.zoom = 13;


  }
$scope.map();
$scope.meta = function () {
    $http.get('http://94.125.132.253:8000/getmetas').success(function (data, status, headers) {

        $scope.metas = data;
        console.log($scope.category);
        console.log(data);
        $scope.message = 'List of Uncategorised places';


    })
}
$scope.meta();
$scope.meta1 = function (data, status, headers) {
    var formdata = {
        'cat': $scope.cat,
    }
    var inserturl = 'http://94.125.132.253:8000/getcategories?meta=' + formdata.cat;
    return $http.get(inserturl).success(function (data, status, headers) {

        $scope.categories = data;
        console.log(formdata.cat);
        console.log(data);

    });
};


$scope.$watch('cat', function (newvalue) {
    $scope.meta1();
});
$scope.meta2 = function (data, status, headers) {
    var formdata = {
        'category': $scope.category,
    }
    var inserturl = 'http://94.125.132.253:8000/getsubcategories?category=' + formdata.category;
    return $http.get(inserturl).success(function (data, status, headers) {

        $scope.subcategories = data;
        console.log(formdata.sub);
        console.log(data);

    });
};

$scope.$watch('category', function (newvalue2) {
    $scope.meta2();
});

score 1 · Answer 1 · answered Aug 14 '14 at 14:23

As far as I can see, there is no problem with your html. This error occurs when you create a circular loop like when you updates a watched variable and in the triggered event function you updates it again.

Can you edit your question and show us your javascript?

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

I think you are interested in Google Maps with angularjs.

I suggest an alternative, ng-map, as I suggested here Google maps for AngularJS

With ngMap, I can satisfy your requirement easily and you don't have to know about directive options and instructions.

<script>
var MyCtrl = function($scope) {
  $scope.updateCenter = function(lat,lng) {
    $scope.map.setCenter(new google.maps.LatLng(lat, lng));
  }
}
</script>

<body ng-controller="MyCtrl">
  <map center="[40.74, -74.18]"></map>
  <button ng-click="updateCenter(41.74, -75.18)">Update Center</button>
</body>

Example here!

edited May 23 '17 at 12:05

Community

1
1

answered Aug 14 '14 at 17:51

allenhwkim

27,270
18
89
122

I am very new to angular, would you be able to tell me more in detail how to do this? All I want is, coordinates to be shown on the map, these coordinates are already present on my page through my api, I just want to show them on a map, that is all I want – Roxci William Aug 15 '14 at 08:24
How can I put my own variable in center="" if I use ngmap approach – Roxci William Aug 15 '14 at 13:13
Here is the example to update the center. http://plnkr.co/edit/UMQVVXtCB4AhzE4uoQK7?p=preview. I update the answer – allenhwkim Aug 15 '14 at 13:32
That plunkr updates the values you add, I want my variables coming from angular which are already on the page in the form of {{lat}},{{lng}}. I want these values in center – Roxci William Aug 15 '14 at 13:53
Like this, http://plnkr.co/edit/sE3N4mPoubjdko9chks6?p=preview? Or this, http://plnkr.co/edit/33cZZPBZOkB7TiACTZ9Z?p=preview? Anyway. you can update center, – allenhwkim Aug 15 '14 at 15:39

Google maps showing Uncaught Error: 10 $digest() iterations reached. Aborting!; angular app

2 Answers2