javascript google maps api v3 markers and infowindow

Question

I have a problem with google maps api v3 and markers with infowindow.

following part of code set markers, but its not possible to access the infowindows with click.

var infowindow = new google.maps.InfoWindow();
var marker, i;
function setMarker(){
 for (i = 1; i < 240; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(line[i][0], line[i][1]),
    map: map2
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent("Test");
infowindow.open(map,marker);
});
}
}

I hope someone can help me :)?

(1) Any errors in the JavaScript console? (2) [Don't create a function in a loop.](http://stackoverflow.com/questions/8158284/closure-callback-in-for-loop) It will end up closing over the last value in the loop only. — Matt Ball, May 08 '12 at 00:20
You are setting markers on `map: map2` and adding click listener on `infowindow.open(map,marker);` is this a problem ? — The Alpha, May 08 '12 at 00:22

The Alpha · Answer 1 · 2012-07-07T10:15:12.180

If everything else is alright then variable scoping problem and in infowindow.open(map, marker) should be map2

var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 1; i < 240; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(line[i][0], line[i][1]),
    map: map2
  });

  google.maps.event.addListener(marker, 'click', (function(marker) {
    return function() {
      infowindow.setContent("Test");
      infowindow.open(map2, marker);
    }
  })(marker));
}

score 0 · Answer 2 · answered May 08 '12 at 00:27

0

Maybe this is the problem:

infowindow.open(map2,marker);

Where you declaring map2? What is map?

answered May 08 '12 at 00:27

kbec

3,415
3
27
42

score 0 · Answer 3 · answered Sep 30 '13 at 09:35

If you have an array of locations like following

var locations = [
    [33.890542, 150.274856],
    [36.923036, 152.259052],
    [38.028249, 154.157507]
];

then you can use following code

function initialize() {
    var myLatlng = new google.maps.LatLng(locations[0][0], locations[0][1]);
    var myOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map"), myOptions);

    for(var i=0;i<locations.length;i++)
    {
        var latlng=new google.maps.LatLng(locations[i][0], locations[i][1]);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "marker : "+(i+1)
        });
    }     
}
google.maps.event.addDomListener(window, 'load', initialize);

Working Example

javascript google maps api v3 markers and infowindow

3 Answers3