Too much recursion error due to bounds.extend method

Question

I am trying to create bound and zoom to the my markers. But i have the error i mentioned at line:

bounds.extend(markers[i].position);

When i set the length of my markers.length in for loop then it gives Too much recursion error
I have all the markers displayed but they are not zoomed and bounded and i also have the error which i just mentioned.

My code to do this is:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        #map-canvas {
            width: 1350px;
            height: 600px;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script>
        function initialize() {
            //var markers = new Array();
            var markers = [];
            $.ajax({
                type: 'GET',
                url: './Content/TextFile/LongLat.txt',
                //filereader\filereader\Content\TextFile\LongLat.txt
                //  url: './distinctGimeiNo.txt',
                dataType: 'text',
            }).success(function (data) {
                var infowindow = new google.maps.InfoWindow();

                var marker;
                var s2 = data.replace(/^.*$/, " ").replace(/\r\n/g, " ");
                var array = s2.split(/[ ]+/g);
                var test = [].concat.apply([], array.map(function (array) { return array.split(/\s+/); }))

                var col1 = [];
                var col2 = [];
                var col3 = [];
                var j = 0;
                // var currentLocation =
                var mapOptions =
                    {
                        zoom: 2,
                        center: new google.maps.LatLng(73, 23),
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                for (var i = 0; i <= test.length - 3; i = i + 3) {
                    col1[j] = test[i];
                    col2[j] = test[i + 1];
                    col3[j] = test[i + 2];
                    var myLatlng = new google.maps.LatLng(col3[j], col2[j]);
                    marker = new google.maps.Marker(
                       {
                           position: myLatlng,
                           map: map,
                           title: 'Hello World! ' + col1[j]
                       });
                    markers.push(marker);
                    console.log("test2");
                    j++;
                }
                function AutoCenter() {
                    var bounds = new google.maps.LatLngBounds();
                    for (var i = 0; i < markers.length; i++) {
                        bounds.extend(markers[i].position);
                    }
                    map.fitBounds(bounds);
                }
                AutoCenter();
            })
        }
        google.maps.event.addDomListener(window, 'load', initialize);
        console.log("Check finished2");
    </script>    
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>

Could someone please let me know the solution of the problem ?

score 3 · Answer 1 · edited May 23 '17 at 11:59

Your first set of coordinates is not valid. When you put invalid coordinates into a google.map.LatLngBounds, the result is not usable for configuring the map (it generates the error you report too much recursion).

The first row of your data (taken from this question) doesn't contain numbers.

If I skip the first entry, it works for me:

    for (var i = 3; i <= test.length - 3; i = i + 3) {
        col1[j] = test[i];
        col2[j] = test[i + 1];
        col3[j] = test[i + 2];
        var myLatlng = new google.maps.LatLng(col3[j], col2[j]);
        marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Hello World! ' + col1[j]
        });
        markers.push(marker);
        console.log("test2"+marker.getPosition().toUrlValue(6));
        j++;
    }

proof of concept fiddle

working code snippet:

function initialize() {
  //var markers = new Array();
  var markers = [];
  /*    $.ajax({
          type: 'GET',
          url: './Content/TextFile/LongLat.txt',
          //filereader\filereader\Content\TextFile\LongLat.txt
          //  url: './distinctGimeiNo.txt',
          dataType: 'text',
      }).success(function (data) {
  */
  var infowindow = new google.maps.InfoWindow();

  var marker;
  /*        var s2 = data.replace(/^.*$/, " ").replace(/\r\n/g, " ");
          var array = s2.split(/[ ]+/g);
          var test = [].concat.apply([], array.map(function (array) {
              return array.split(/\s+/);
          }))
  */
  // from https://stackoverflow.com/questions/29160608/how-to-replace-space-with
  var rows = ["ID LONGITUDE LATITUDE", "0 77.139305 28.795975", "2 77.308929 28.486877", "4 73.820680 18.464110"];
  var test = [].concat.apply([], rows.map(function(row) {
    return row.split(' ');
  }))

  var col1 = [];
  var col2 = [];
  var col3 = [];
  var j = 0;
  // var currentLocation =
  var mapOptions = {
    zoom: 2,
    center: new google.maps.LatLng(73, 23),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  for (var i = 3; i <= test.length - 3; i = i + 3) {
    col1[j] = test[i];
    col2[j] = test[i + 1];
    col3[j] = test[i + 2];
    var myLatlng = new google.maps.LatLng(col3[j], col2[j]);
    marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World! ' + col1[j]
    });
    markers.push(marker);
    console.log("test2:" + marker.getPosition().toUrlValue(6));
    j++;
  }

  function AutoCenter() {
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
      bounds.extend(markers[i].getPosition());
    }
    map.fitBounds(bounds);
  }
  AutoCenter();
  //    })
}
google.maps.event.addDomListener(window, 'load', initialize);
console.log("Check finished2");

html,
body,
#map-canvas {
  width: 100%;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

Jordi Castilla · Answer 2 · 2015-03-20T12:17:15.413

1

You are out of bounds... replace <= by < in the for loop...

for (var i = 0; i < markers.length; i++) {

Check this fiddle maps example to guide you... ;)

Searching a bit, I found some info, maybe your case:

LatLngBounds() does not take two arbitrary points as parameters, but SW and NE points use the .extend() method on an empty bounds object

var bounds = new google.maps.LatLngBounds();
bounds.extend(myPlace);
bounds.extend(Item_1);
map.fitBounds(bounds);

edited Mar 20 '15 at 12:17

answered Mar 20 '15 at 11:34

Jordi Castilla

26,609
8
70
109

I mean something liek this : http://i.imgur.com/xsePfSq.png It even dont load map now. – kalho Mar 20 '15 at 11:58
Actually i was trying to bound the markers to zoom the area to fit all marks in it. If u see my code i do something like this : map.fitBounds(bounds); The one u have given i have already done that. And when i do that it gives too much recursion error. – kalho Mar 20 '15 at 12:14
But i dont have 1 item. There is a big file that i read. and i do bounds.extend(..) in for loop. I AM Not able to understand your Item_1 and bounds and myPlace . Please explain in detail. – kalho Mar 20 '15 at 12:30
there is a big file which contains Long lat and ID.. I am not allowed to write Marker statically for each. Is tehre any other solution ? – kalho Mar 20 '15 at 12:34
you have to use what I gave you, **CREATING `LatLngBounds()` object one time**, find the 2 farthest points in your file and use it to declare the bounds... check this answer: http://stackoverflow.com/questions/29120950/show-closest-result-of-a-geocoder-on-map/29125599#29125599 and modify it to find the points. – Jordi Castilla Mar 20 '15 at 13:02

Too much recursion error due to bounds.extend method

2 Answers2