While plotting multiple markers on a Google map, I got an Uncaught RangeError: Maximum call stack size exceeded error message in the log for Ionic framework.
I am using a Cordova Google plugin for the map. Can anyone figure out where the error is in my code?
var autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, options);
var autocompleteto = new google.maps.places.Autocomplete(inputto,options);
google.maps.event.addListener(autocompleteFrom, 'place_changed', function() {
var bounds = new google.maps.LatLngBounds();
var place = autocompleteFrom.getPlace();
$rootScope.fromLat = place.geometry.location.lat();
$rootScope.fromLng = place.geometry.location.lng();
$rootScope.from = place.formatted_address;
$scope.placesfrom = $rootScope.from;
fromlat = $rootScope.fromLat;
fromlng = $rootScope.fromLng;
var Mapoptions ={
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
zoomControl:false,
draggable:true,
mapTypeControl:false,
scaleControl:false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:true
}
var googlemaphome = document.getElementById('googlemap-home');
var Map = new google.maps.Map(googlemaphome,Mapoptions);
var marker;
var markers = [
[fromlat,fromlng],
[28.6328,77.2197]
];
for(var i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
icon: 'img/marker.png',
map: Map
});
}
Map.fitBounds(bounds);
var boundsListener = google.maps.event.addListener((Map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
$scope.$apply();
});
`
I think the issue is here:
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
Since the subarrays in your markers[]
array only have 2 elements, and the index for arrays starts at 0, I believe you should change this line to
var position = new google.maps.LatLng(markers[i][0], markers[i][1]); //use 0 and 1 instead of 1 and 2