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
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of saturation
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?
Avatar of leakim971
leakim971
Flag of Guadeloupe image

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

JavaScript
JavaScript

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo