CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3settimeouttiming
Will
Will

Reputation: 841

Am I using setTimeout() correctly in timing when these javascript functions fire?

I am using the Google Maps API v3 to create an interactive map with markers on the map and info windows that open up when you click the markers. The process is you create a marker, create an info window, and bind the two with a click (the event will also close any other open info windows).

This works just fine.

I wanted the markers to drop in succession, so I added a delay which grows based on count for each marker.

After I did this I noticed that the the click events weren't able to find the markers that were created. I assume this is because the markers were not created yet as they were still in delay.

My solution was to add a delay to the binding function equal to the last marker's delay + a little extra time.

My question is if this is the best way of controlling this situation?

Pseudo-code overview:

function mapInit(){

    google create map code;
    //Begin First PHP loop, pulls all information in
    setTimeout(function(){  //PHP loop iteration 1
        create marker1;
        create window1;
    }, 1 * 150);

    setTimeout(function(){  //PHP loop iteration 2
        create marker2;
        create window2;
    }, 2 * 150);

    setTimeout(function(){  //PHP loop iteration 3
        create marker3;
        create window3;
    }, 3 * 150);
                            //end first PHP loop

    function createListeners(){

        //begin second PHP loop over markers

        google.maps.event.addListener(marker1, 'click', function() {  //iteration 1

            //internal loop over windows and if for each window
            open window1;  //if is true, open instead of close
            close window2;
            close window3;
        }
        google.maps.event.addListener(marker2, 'click', function() {  //iteration 2

            //internal loop over windows and if for each window    
            open window2;
            close window1;
            close window3;
        }
        google.maps.event.addListener(marker3, 'click', function() {  //iteration 3

            //internal loop over windows and if for each window
            open window3;
            close window1;
            close window2;
        }
    }

    setTimeout(function() {
        createListeners();
    }, 3 * 150 + 100);}

}

on window.load call mapInit();

More details:

The javascript is created dynamically in PHP. I am pulling the marker and window information from an external source, and as I loop through that the markers and window information is written, and at the end of that loop the listeners are all created.

When the script is actually ran on page load, it timeouts between each marker/window creation. As soon as a marker is made it is loaded onto the map. If I were to put the marker/window addListener in the same timeout, it will not see the marker/windows that are to be created after its creation, and thus the addListener will not be complete.

Upvotes: 2

Views: 669

Answers (1)

Alex W
Alex W

Reputation: 38213

It shouldn't matter that these are generated dynamically in PHP, because in the end the JavaScript won't ever notice. Since you have created marker-x and window-x already by the end of your setTimeout it should be feasible to add an event listener to them:

setTimeout(function(){
    create marker1;
    create window1;
    google.maps.event.addListener(marker1, 'click', function() {
        open window1;
        close window2;
        close window3;
    };
}, 1 * 150);

If you don't know how many items there will be, you can keep track of it in PHP and then pass that info along to JavaScript (e.g. echo "var numOfItems = " . $numItems . ";";)

Upvotes: 1

Related Questions