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

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.

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./s/1FtrV

http://clip2net./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.

• javascript
• google-maps
• google-maps-api-3

4 Answers 4

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

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.

Not entirely sure what you are trying to do. You only really need to set up one infowindow and load the content dynamically on mouseover.

You only need to use one marker and set the listener each time.

You may want to try the following but I am not entirely sure what you are trying to do with your code.

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

This link may be helpful.

This listener

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

runs that function when the event occurs. So you click on a marker, and the API runs the function and attempts to open infoWindow[i] on marker[i]. At the time that is run, either i is out of scope, or it's the last value of the loop.

The correct way of linking infoWindows to markers consistently is to use a helper function -- which is generally called createMarker() -- as demonstrated in Larry's port of Mike Williams' code.