setinterval or settimeout for google map v3

Question

. I have 50 addresses coming from sql. Each address will be rendered inside a div LocationAddress. I loop through each of them, geocode and plot the marker in the map. But it only displays 11 of the. I know this is because of geocoder being bottlenecked. How do I use setinterval or settimeout to control this? I researched and saw people using settimeout to handle this..please someone guide me...

  var geocoder;
      var map;
      function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(42.095287, -79.3185139);
        var myOptions = {
          maxZoom: 14,
          zoom: 9,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

       }

    function codeAddress() {
        var infowindow = new google.maps.InfoWindow({}); 

        $('.LocationAddress').each(function() {

            var addy = $(this).text();
            geocoder.geocode( { 'address': addy}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map,               
                        title:addy,
                    });

                 //Adding a click event to the marker 
                google.maps.event.addListener(marker, 'click', function() { 
                    infowindow.setContent('<div id=\"infowindow\" style=" height:100px;>'
                                            +'<div id=\"LeftInfo\">'+ "Hello World!"
                                            +'</div>'+'</div>'); 
                    infowindow.open(map, this); 
                });  
             }  

            });//Geocoder END

        });
    }

Mikko · Accepted Answer · 2012-03-21T01:26:04.597

1

I actually coded it and tested, this one worked:

var geocoder;
var map;
var addresses = new Array();
var infowindow;
var theInterval;

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(42.095287, -79.3185139);
    var myOptions = {
        maxZoom: 14,
        zoom: 9,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    infowindow = new google.maps.InfoWindow({});
}

$(document).ready(function () {
    getAddresses();
    theInterval = setInterval("codeAddress()", 1000);
});

function getAddresses () {
    $('.LocationAddress').each(function () {
        addresses.push($(this).text());
    });
}

function codeAddress() {
    if (addresses.length == 0) {
        clearInterval(theInterval);
    }
    var addy = addresses.pop();
    geocoder.geocode({
        'address': addy
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map,
                title: addy,
            });

            //Adding a click event to the marker 
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent('<div id=\"infowindow\" style=" height:100px;>' + '<div id=\"LeftInfo\">' + "Hello World!" + '</div>' + '</div>');
                infowindow.open(map, this);
            });
        }

    }); //Geocoder END
}

edited Mar 21 '12 at 01:26

answered Mar 21 '12 at 00:35

Mikko

602
4
18

where do I use the setInterval function? Inside CodeAddress()? or after codeAddress(){} ?? – Anjana Sharma Mar 21 '12 at 00:43
You do it outside. Anyway, I just edited it on the part addresses.length==0 to clear the interval we made. – Mikko Mar 21 '12 at 00:47
where is getAddress() being called?? sth broke so my map didn't dispaly at all... when you said 'Declare a variable on the top that will contain our addresses and infowindow:' you mean make those global variable?? so they are available to any functions? – Anjana Sharma Mar 21 '12 at 00:59
For addresses, yes, but for the infowindow you may try putting var infowindow on the top then inside initialize put infowindow = new google.maps.Infowindow({}); – Mikko Mar 21 '12 at 01:02
Thank you so much! May god bless you for your willingness to help! Worked like magic! this thing had been driving me crazy.. – Anjana Sharma Mar 21 '12 at 01:42
one quick question? How can we show all the markers at once instead of dropping one per second? I have 50 addresses, it literally took almost a minute.. – Anjana Sharma Mar 21 '12 at 01:56
1

The reason why we placed a setInterval was to space each geocoding request by a second. As seen here (https://developers.google.com/maps/documentation/business/faq?hl=en#usage_limits), we are only limited to 10 queries per second. You may reduce it from 1000 (1s) to 100 to make it 10qps. – Mikko Mar 21 '12 at 02:11

score 0 · Answer 2 · answered Mar 21 '12 at 00:37

You could serialize the requests so that you process one address at a time. When that one finishes, you process the next one. That could be done like this:

function codeAddress() {
    var infowindow = new google.maps.InfoWindow({}); 

    var addresses = $('.LocationAddress');
    var addressIndex = 0;

    function next() {
        if (addressIndex < addresses.length) {
            var addy = addresses.eq(addressIndex).text();
            ++addressIndex;
            geocoder.geocode( { 'address': addy}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map,               
                        title:addy,
                    });

                 //Adding a click event to the marker 
                google.maps.event.addListener(marker, 'click', function() { 
                    infowindow.setContent('<div id=\"infowindow\" style=" height:100px;>'
                                            +'<div id=\"LeftInfo\">'+ "Hello World!"
                                            +'</div>'+'</div>'); 
                    infowindow.open(map, this); 
                });  
                next();
             }  

            });//Geocoder END
        }
    }
    next();
}

@AnjanaSharma - Then, there must be errors occuring somewhere. You need to be looking in the error console and doing `console.log(status)` on the status code to find out exactly which addresses are getting processed and why. It sounds like time for some elemental debugging. — jfriend00, Mar 21 '12 at 00:59

setinterval or settimeout for google map v3

2 Answers2