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

Question

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);
        }
      });


    }

take `map.fitBounds(bounds);` out of your loop, you only need to do this once, after all the looping. Not sure that would cause this error though — duncan, Mar 28 '13 at 09:08
I have the same error but just on the jasmine spec. The spec passes though and the actual view works as expected. — Giorgio Bozio, May 14 '13 at 15:49

score 146 · Accepted Answer · answered Jun 21 '13 at 09:23

146

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

answered Jun 21 '13 at 09:23

Ollie Buck

1,484
1
11
4

25

It also happens if the value passed is a string (or probably anything else than a number). – Halil Özgür Oct 02 '13 at 13:58
I had the same Problem when passing a String for new google.maps.LatLng. Remarkeable is the fact, that this didm't occur in FF, only in Chrome. – Paflow May 12 '15 at 13:07
This was my problem also. I was using WIPMANIA API to get long/lat, but since i loaded my google map api asynchronous with Ajax loaded content, somehow i had made the mistake of loading WIP after the initiatlizing. – balslev Jun 04 '15 at 06:42
3

Even though this post hints into the/a right direction, it is not an answer but a comment. So we get that error when at least one of the parameters of `new google.maps.LatLng(...)` is either **`undefined`** or **`NaN`**. – Bitterblue Jun 20 '16 at 10:14

score 4 · Answer 2 · answered Feb 19 '16 at 09:46

4

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).

answered Feb 19 '16 at 09:46

Jaspreet Singh

1,672
1
14
21

In my case, i am using elastic search and bounds.push(latlng); was taking wrong values. In my case, i misspelled the lat and lng. ES was returning lat and lon and i was using lat and lng. – Awais Mustafa Aug 15 '17 at 13:07

score 2 · Answer 3 · answered Sep 10 '14 at 13:33

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);
        });
    });
});

score 2 · Answer 4 · answered Nov 02 '15 at 17:37

2

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

answered Nov 02 '15 at 17:37

Kristian

2,071
23
15

In my case this was indeed the issue – Alvin Bakker Nov 06 '15 at 12:10

Quv · Answer 5 · 2018-06-17T07:21:40.443

1

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!

edited Jun 17 '18 at 07:21

answered Feb 10 '18 at 19:01

Quv

2,958
4
33
51

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

5 Answers5

Possible scenarios

Linked