Uncaught RangeError: Maximum call stack size exceeded Google maps when I try to set bounds

Google Maps

Google Maps Problem Overview


I created a working google map that I am now trying to have auto zoom out so all the points fit.

When I added:

var bounds = new google.maps.LatLngBounds();

and

bounds.extend(point);
map.fitBounds(bounds); 

I then get this error:

Uncaught RangeError: Maximum call stack size exceeded
J.get
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf
J.set
(anonymous function)
Ey.(anonymous function).zoomRange_changed
Zf

All my code for creating the map is:

function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("getMapMarkers.php", function(data) {
        var bounds = new google.maps.LatLngBounds();
		var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
        
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" ;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, html);
		  bounds.extend(point);
		  map.fitBounds(bounds);
        }
      });
	  
	
    }

Google Maps Solutions


Solution 1 - Google Maps

I've just run into the same exception, it turned out to be that the longitude passed into "new google.maps.LatLng" was undefined.

Solution 2 - Google Maps

Possible scenarios

  • Either map.fitBounds(bounds); is not receiving latitude/longitude or both.
  • The received values of latitude/longitude are not in correct format(NaN).

Solution 3 - Google Maps

I used google map plugin: http://code.google.com/p/jquery-ui-map/ I found myself with the same problem, and as Ollie point, I had my json bad formatted. This was my json

mapObj= 
[      {         "latitude": 57.797333,         "longitude": 12.050211,         "title": "Angered",         "content": "Representing :)"      },      {         "latitude": 57.696995,         "longitude": "11.9865",         "title": "Gothenburg",         "content": "Swedens second largest city"      } ]

Because of that longitude written as a string, I was getting that error.

SOLVED: Having all coordinates as numbers.!

To add the map (assuming local json, if not refer to reference link):

	$('#map_canvas').gmap().bind('init', function() { 
	$.each( mapObj, function(i, marker) {
		$('#map_canvas').gmap('addMarker', { 
			'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
			'bounds': true 
		}).click(function() {
			$('#map_canvas').gmap('openInfoWindow', { 'content': marker.content }, this);
		});
	});
});

Solution 4 - Google Maps

Setting map center to a not supported lat/long also produces this error.

Solution 5 - Google Maps

This error also seems to be raised when you set NaN as the value of zoom.

map.setZoom(null)      // => nothing happens
map.setZoom(undefined) // => nothing happens 
map.setZoom(NaN)       // => error!

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMikeView Question on Stackoverflow
Solution 1 - Google MapsOllie BuckView Answer on Stackoverflow
Solution 2 - Google MapsJaspreet SinghView Answer on Stackoverflow
Solution 3 - Google MapsGonzaloView Answer on Stackoverflow
Solution 4 - Google MapsKristianView Answer on Stackoverflow
Solution 5 - Google MapsQuvView Answer on Stackoverflow