problem with instance of string var

Question

I'm doing a loop and on each iteration i'm setting a string var called content, this var i'm using to create some infoWindows of google map markers. But on each iteration that change the value of the var instead that make a new instance, this modifed the value and always sets the infoWindows of the markers with the last value of the var content why i'm doing wrong.

    for (var i = 0; i < info.length; i++) {

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(info[i].split(',')[5],
                                        info[i].split(',')[6]),
            optimized: false,
            map: map,
            zoom: 6,
            draggable: true,
            animation: google.maps.Animation.DROP
        });


        var content = '<p>Central: ' + info[i].split(',')[1] + '</p>';

        var infoWindow = new google.maps.InfoWindow({
            content:  content
        });

        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.open(map, this);
            currentMarker = this;
        });
    }

can you fix the indenting? its quite confusing.

Daniel A. White
– Daniel A. White

2011-06-29 20:24:47 +00:00
Commented Jun 29, 2011 at 20:24 — Daniel A. White
– Daniel A. White, Commented Jun 29, 2011 at 20:24
Where's the closing } of your for loop?

Dogbert
– Dogbert

2011-06-29 20:24:54 +00:00
Commented Jun 29, 2011 at 20:24 — Dogbert
– Dogbert, Commented Jun 29, 2011 at 20:24
Are you missing the closing brace for the for?

Variant
– Variant

2011-06-29 20:26:26 +00:00
Commented Jun 29, 2011 at 20:26 — Variant
– Variant, Commented Jun 29, 2011 at 20:26
@Dogbert and @Daniel A. White my code it's already modified

Jorge
– Jorge

2011-06-29 20:26:27 +00:00
Commented Jun 29, 2011 at 20:26 — Jorge
– Jorge, Commented Jun 29, 2011 at 20:26

Prusse · Accepted Answer · 2011-06-29 20:32:57Z

3

google.maps.event.addListener(marker, 'click', function () {
    infoWindow.open(map, this);
    currentMarker = this;
});

Is creating a closure and infoWindow points to the the outer function variable so all your handlers open the same infoWindow. There is only function scope in javascript(no one for every for, if, etc). Use a closure to achieve what you want:

google.maps.event.addListener(marker, 'click', (function(infoW){
    return function () {
        infoW.open(map, this);
        currentMarker = this;
    };
})(infoWindow));

answered Jun 29, 2011 at 20:32

Prusse

4,3232 gold badges26 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jorge Over a year ago

awesome men!! i didn't know that i'm going to read a little bit more of javascript work

Bohemian · Accepted Answer · 2011-10-02 09:27:18Z

0

This is indeed weird.

Did you try to make the content building inline?

var infoWindow = new google.maps.InfoWindow({
    content:  '<p>Central: ' + info[i].split(',')[1] + '</p>'
});

edited Oct 2, 2011 at 9:27

Bohemian♦

427k103 gold badges603 silver badges750 bronze badges

answered Jun 29, 2011 at 20:29

Variant

17.4k4 gold badges44 silver badges67 bronze badges

1 Comment

Jorge Over a year ago

sure, that was my first solution but with the same result

Collectives™ on Stack Overflow

problem with instance of string var

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related