What is the following code doing?

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

    }

}

or read this -> https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures — Manse, Nov 19 '12 at 13:16

score 1 · Answer 1 · answered Nov 19 '12 at 13:19

1

(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);

The code:

Immediately executes the defined function, passing to it i, and marker
It then adds a handler to the marker for the click event
When you click the marker, if there is no existing infowindow, it creates one
- It then adds content and opens the infowindow on the marker on the map

answered Nov 19 '12 at 13:19

Joseph

117,725
30
181
234

is there any looping inside this function ? – kavithma Nov 19 '12 at 13:45
all i need is to seperate bellow codes and write inside a seperate function (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); – kavithma Nov 19 '12 at 14:40

Shadow The GPT Wizard · Accepted Answer · 2012-11-19T14:56:01.870

0

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);
}

edited Nov 19 '12 at 14:56

answered Nov 19 '12 at 13:19

Shadow The GPT Wizard

66,030
26
140
208

could some let me know how to re-write this function ? so that i can pass the i and marker as a input parameters ? and within the function it will loop through for each markers ? – kavithma Nov 19 '12 at 13:47
Is this function your whole code? It *should* be part of a loop like you say. Anyway please post more code and details. – Shadow The GPT Wizard Nov 19 '12 at 13:51
Not here, add it into your question. – Shadow The GPT Wizard Nov 19 '12 at 14:27
ah i added in to the question – kavithma Nov 19 '12 at 14:29
OK, your code place three markers set by you in the code. So what exactly are you asking? How to change the code from using fixed coordinates (e.g. 17.22, 78.28) to using coordinates given by user? Or something else? – Shadow The GPT Wizard Nov 19 '12 at 14:36
i need to seperate bellow codes from the main codes and write it as a separete function (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); – kavithma Nov 19 '12 at 14:41
great it works ! u r a star . thanks for understanding my exact issue and prompt answer..... – kavithma Nov 19 '12 at 15:23
one thing i need to ask you, do you know how to change the window style in to curves , presently it comes like square window when i click on a specific map point, if we can change the edges in to curve edges it will look nice .. – kavithma Nov 19 '12 at 15:27
Cheers, I fear I'm familiar only with the JavaScript part and not with the Google API part so don't know about those curves. – Shadow The GPT Wizard Nov 19 '12 at 15:39
that's ok pal. i will google it, – kavithma Nov 19 '12 at 15:41
OK, glad I could help. See you are not new here but you never accepted an answer.. just for your information if answer (not just this one, other answers on your other questions as well) solved your problem you can mark this as accepted by ticking the empty V icon to the left. (And by this essentially marking the whole question as resolved/having accepted answer) – Shadow The GPT Wizard Nov 19 '12 at 15:46
ah thanks for the info mate, i just ticked that V icon.. – kavithma Nov 19 '12 at 15:49

score 0 · Answer 3 · answered Nov 19 '12 at 14:32

Your code snipet is equivalent to the code below except it avoids to declare the variable myFunc :

var myFunc = 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);
    });
};
myFunc(i, marker);

It's a common javascript pattern to capture the value of mutable variables (i or marker could changed if we are in a for loop ; without that it would be the last value of i and marker which would be used in the click handler).

What is the following code doing?

3 Answers3