Avatar of 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>
    <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% }
      <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>

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

                        var bounds = new google.maps.LatLngBounds();
                        for (var j = 0; j < locations.length; 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;

                          } 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;
                              } 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
                              //zoom the map to nicely fit the bounds of the two closest markers and the starting point


    <div id="map-canvas"></div>

Avatar of undefined
Last Comment

8/22/2022 - Mon

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

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?

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.