InfoWindow in api google maps javascript v3

Question

There is such function. It works, no problem.

function setIconsOnMap(arrIcons, pathIcon){
  var arrLatLng=Array();
  var markers=Array();
  var infowindow=Array();
  for (var i=0; i<arrIcons.length; i++){
    arrLatLng[i]=new google.maps.LatLng(arrIcons[i]['geo lat'],
      arrIcons[i]['geo lon']);
  }
  for (i=0; i<arrLatLng.length; i++){
    markers[i]=new google.maps.Marker({
      position: arrLatLng[i],
      map: map
    });
    markers[i].setIcon(pathIcon);
    infowindow[i]=new google.maps.InfoWindow({
      content: 'uuuu'
    });
    google.maps.event.addListener(markers[i], 'mouseover', function(){      
      alert('sss');
    });
  }
}

http://clip2net.com/s/1FtrV

http://clip2net.com/s/1Ftrp

But if I try to show InfoWindow instead alert(), then the function doesn't work.

function setIconsOnMap(arrIcons, pathIcon){
  var arrLatLng=Array();
  var markers=Array();
  var infowindow=Array();
  for (var i=0; i<arrIcons.length; i++){
    arrLatLng[i]=new google.maps.LatLng(arrIcons[i]['geo lat'],
      arrIcons[i]['geo lon']);
  }
  for (i=0; i<arrLatLng.length; i++){
    markers[i]=new google.maps.Marker({
      position: arrLatLng[i],
      map: map
    });
    markers[i].setIcon(pathIcon);
    infowindow[i]=new google.maps.InfoWindow({
      content: 'uuuu'
    });
    google.maps.event.addListener(markers[i], 'mouseover', function(){      
      infowindow[i].open(map, markers[i]);
    });
  }
}

Please give a hint me where my mistake is.

Answer 1

If I am not mistaken your arrays are out of scope when mouseover event is triggered, set infowindow as marker property and you should be fine (also arrays should be declared globally for further reference)

var arrLatLng=Array();
var markers=Array();
function setIconsOnMap(arrIcons, pathIcon){
  for (var i=0; i<arrIcons.length; i++){
    arrLatLng[i]=new google.maps.LatLng(arrIcons[i]['geo lat'],
      arrIcons[i]['geo lon']);
  }
  for (i=0; i<arrLatLng.length; i++){
    markers[i]=new google.maps.Marker({
      position: arrLatLng[i],
      map: map
    });
    markers[i].setIcon(pathIcon);
    markers[i].infoWindow=new google.maps.InfoWindow({
      content: 'uuuu'
    });
    google.maps.event.addListener(markers[i], 'mouseover', function(){      
      this.infoWindow.open(map, this);
    });
  }
}

Answer 2

function setIconsOnMap(arrIcons, pathIcon){
  var arrLatLng=Array();
  var markersArray = Array();
  var infowindowArray = Array();
  for (var i=0; i<arrIcons.length; i++){
    arrLatLng[i] = new google.maps.LatLng(arrIcons[i]['geo lat'],
    arrIcons[i]['geo lon']);

    markers = new google.maps.Marker({
      position: arrLatLng[i],
      map: map
    });
    markers.setIcon(pathIcon);
    markersArray[i] = markers;
    infowindow = new google.maps.InfoWindow({
      content: 'uuuu'
    });

    google.maps.event.addListener(markers , 'mouseover', function(){      
      infowindow.open(map, markers);
    });
    infowindowArray[i] = infowindow;
  }
}

try this code. It will work.