Avoid making functions in a loop with Google Maps addEventListener

Question

So I have this code, that loops through every town in window.towns, which is a nested object sorted by the first character of the town name. Like so:

//sample data:
window.towns = { 
    'A' : { 
        "Aberdeen" : { 
            "town_info": {
                 "google_maps": {
                     "lat" : 47.561236,
                     "lng" : 0.1235467 }
                         }
                     } , 
        "Agency Village" : {
            "town_info": {
                 "google_maps": {
                     "lat" : 47.561236,
                     "lng" : 0.1235467 }
                         }
                     } 
           },
    'B' : { //towns beginning with B
          },
    'C' : {},
 // ... all the way thru 'Z'
}

My code then loops through each letter of the alphabet, and for each letter, loops through the towns that start with that letter, creates a marker on the google map for each town, and an info window that appears when you click on the marker.

for (var alphabet in window.towns) {
    for (var town in window.towns[alphabet]) {

        var info = window.towns[alphabet][town].town_info;

        if (info !== undefined &&
            typeof info !== undefined &&
            info.google_maps !== undefined &&
            typeof info.google_maps !== undefined) {

            var lat = info.google_maps.lat,
                lng = info.google_maps.lng;

            info.marker =
                new window.google.maps.Marker({
                    position: new window.google.maps.LatLng(lat,lng),
                    map: map,
                    title: window.towns[alphabet][town].post_title,
                    icon: icon_image
                });

            info.marker.iwindow =
                new window.google.maps.InfoWindow({
                    content: '<strong><a href="#'+
                        window.towns[alphabet][town].post_title
                            .replace(' ','-','g').toLowerCase()+
                        '" class="town">'+
                        window.towns[alphabet][town].post_title+
                        '</a></strong>'
                });

            window.google.maps.event.addListener(info.marker, 'click', function() {
                this.iwindow.open(map,this);
            });
        }
    }
}

The code works fine as is. However, I get a JSLint error, "don't make functions within a loop", which makes sense. How do I convert my code to avoid making a function within the loop, when the anonymous function depends on the value of this being equal to the current info.marker?

Answer 1

You can define a small function before the loop and then just refer to that local function from within the loop:

Before the loop:

function handleMarkerClick() {
    this.iwindow.open(map,this);
}

Then, in the loop:

for (var alphabet in window.towns) {
    for (var town in window.towns[alphabet]) {

    // ....

    window.google.maps.event.addListener(info.marker, 'click', handleMarkerClick);