InfoWindow in api google maps javascript v3

Question

There is such a 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 of alert (), then the function does not 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 me a hint where is my mistake.

Answer 1

If I'm not mistaken, your arrays go beyond the scope of the mouseover event, set infowindow as a marker property, and you should be fine (also arrays should be declared globally for future 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. He will work.

Answer 3

Not quite sure what you are trying to do. You really need to set up one info window and dynamically load the content on hover.

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

You might want to try the following, but I'm not quite 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.

Answer 4

This listener

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

runs this function when an event occurs. Thus, you click on the marker, and the API starts the function and tries to open infoWindow[i] on marker[i] . At run time, either i goes out of scope or the last value of the loop.

The correct way to bind infoWindows to markers is to use a helper function, which is usually called createMarker() , as demonstrated by Mike Williams in the port of Larry .