Avatar of saturation
saturation
 asked on

Google Maps API - stack overflow at line 26

I am running the following code, and in the IE console I'm getting "stack overflow at line 26".  Anyone know what I may be doing wrong here?  I'm perplexed.



<HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=utf-8">

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
    <style type="text/css">
      html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map-canvas { height: 100% }
      </style>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3&libraries=geometry" type="text/javascript"></script>

    <script>
            $(document).ready(function(){
                    var latlngs = [];
                    var startingPoint;
                    var locations = ['1850 n. damen, chicago, il','1050 w. division, chicago, il', 'w cortland st and n damen ave, chicago, il', 'wicker park, n damen ave, chicago, il'];

                        var geocoder = new google.maps.Geocoder();
                        geocoder.geocode({'address': 'USA'}, function (results, status) {
                              map.fitBounds(results[0].geometry.viewport);
                        });

                        var bounds = new google.maps.LatLngBounds();
                        for (var j = 0; j < locations.length; j++) {
                              codeAddress(locations[j]);
                        }

                        startingPoint = new google.maps.LatLng(getLatLong('565 W. Adams, Chicago, IL 60661'));
                        var mapOptions = {
                          zoom: 14,
                          center: startingPoint,
                          mapTypeId: google.maps.MapTypeId.ROADMAP
                        }

                        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                        var marker = new google.maps.Marker({
                              map: map,
                              icon: "http://www.conceptfire-uk.com/wp-content/uploads/2011/07/icon-pin-color.png",
                              position: startingPoint
                        });


                    function codeAddress(address) {
                        geocoder.geocode( { 'address': address}, function(results, status) {
                          if (status == google.maps.GeocoderStatus.OK) {
                              var location = results[0].geometry.location;
                              compareDistances(location);

                          } else {
                              alert('Geocode was not successful for the following reason: ' + status);
                          }
                        });
                    }


                  function getLatLong(address)
                  {
                        var geocoder = new google.maps.Geocoder();
                        var result = "";
                        geocoder.geocode( { 'address': address}, function(results, status) {
                              if (status == google.maps.GeocoderStatus.OK) {
                                    result = results[0].geometry.location;
                                    alert(result);
                              } else {
                                    result = "Unable to find address: " + status;
                              }
                        });
                        console.log("TEST" + address + " " + result);
                  }


                    function compareDistances(loc){
                        latlngs.push(loc);//add markers to the latlngs array
                        //when the markers array length matches the locations array length...
                        if (latlngs.length == locations.length){
                              var distances = [];
                              //use geometry.spherical to calculate the distances between pairs of lat/lng coordinates
                              for(var j = 0; j < latlngs.length; j++){
                                    distances.push({distance:google.maps.geometry.spherical.computeDistanceBetween(startingPoint, latlngs[j]), marker: j});
                              }
                              //reorder the distances, shortest first, closest will then be distances[0] and distances[1]
                              distances.sort(function(a,b) {
                                    return a.distance - b.distance;
                              });
                              //add the two closest markers
                              var marker1 = new google.maps.Marker({map: map, position: latlngs[distances[0].marker]});
                              var marker2 = new google.maps.Marker({map: map, position: latlngs[distances[1].marker]});
                              //extend the bounds of the map to include the two closest markers and the starting point
                              bounds.extend(startingPoint);
                              bounds.extend(latlngs[distances[0].marker]);
                              bounds.extend(latlngs[distances[1].marker]);
                              //zoom the map to nicely fit the bounds of the two closest markers and the starting point
                              map.fitBounds(bounds);
                        }
                    }
            });

    </script>
  </head>
  <body>

    <div id="map-canvas"></div>
  </body>
</html>
JavaScript

Avatar of undefined
Last Comment
leakim971

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
leakim971

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
saturation

ASKER
This is perfect!  Thank you!  Also, I have an array that may X amount of addresses and Google only allows 10 Geocode queries per second.  How do I space out the array loop/geocode 1 second for every 10 queries?
leakim971

var myArrayOfAddresses = ["addr1", "addr2", "addr3"];
function doGeocodeRequest() {
   for(var i=0;i<10&&myArrayOfAddresses.length>0;i++) {
           geocoder.geocode({'address': myArrayOfAddresses.pop() }, function(results, status) {
                // do what you want with the result
           }
   }
   if(myArrayOfAddresses.length>0) setTimeout(doGeocodeRequest, 1500); // Wait 1.5s before the next set
}

Open in new window

Your help has saved me hundreds of hours of internet surfing.
fblack61