Question

I have downloaded some samples for Google maps API 3 and I can see some code like bellow:

(function (i, marker) {
    google.maps.event.addListener(marker, 'click', function () {
        if (!infowindow) {
            infowindow = new google.maps.InfoWindow();
        }
        infowindow.setContent("Message" + i);
        infowindow.open(map, marker);
    });
})(i, marker);

Could some one explain me what this means? Or can we re-write the above code in different ways? I am bit new to JavaScript and don’t know what exactly the above code does?

here is the full script

function markicons() {

    InitializeMap();

    var ltlng = [];

    ltlng.push(new google.maps.LatLng(17.22, 78.28));
    ltlng.push(new google.maps.LatLng(13.5, 79.2));
    ltlng.push(new google.maps.LatLng(15.24, 77.16));

    map.setCenter(ltlng[0]);



    for (var i = 0; i <= ltlng.length; i++) {
        marker = new google.maps.Marker({
            map: map,
            position: ltlng[i]
        });

        (function (i, marker) {

            google.maps.event.addListener(marker, 'click', function () {

                if (!infowindow) {
                    infowindow = new google.maps.InfoWindow();
                }

                infowindow.setContent("Message" + i);

                infowindow.open(map, marker);

            });

        })(i, marker);

    }

}

Answer 1

This code is assigning the click event handler on given marker so that when clicked, new information window pops up with the text “Message” followed by what looks to be the marker index.

Most likely this code is part of a loop over all the markers.

If I understand your goal correctly, add such function to your code:

function AssignMarkerClick(marker, index) {
    google.maps.event.addListener(marker, 'click', function () {
        if (!infowindow) {
            infowindow = new google.maps.InfoWindow();
        }

        infowindow.setContent("Message" + index);
        infowindow.open(map, marker);
    });
}

Then change your loop to this:

for (var i = 0; i <= ltlng.length; i++) {
    marker = new google.maps.Marker({
        map: map,
        position: ltlng[i]
    });
    AssignMarkerClick(marker, i);
}