I'm currently working on integrating a map into my Angular app to display coordinates obtained from an API on a detailed page. However, I'm encountering an error in the HTML code:
Uncaught Error: 10 $digest() iterations reached. Aborting!
Here is the HTML code snippet:
<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>
The above code snippet is causing the mentioned error. How can this issue be resolved? Below is the JavaScript code where the Controller that connects with the page containing the 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();
});