Google Mouseout only applies to the latest infoindustry
... Hi I have a random problem that I could not figure out. I have a map with markers that show infowindows when you hover over them, which should close when you move the mouse. For some reason, the second part (closing the infowindow on mouseout) only applies to the last marker.
If someone could explain to me where I am going wrong and how to fix my code so that all info windows close when the user pushes their mouse away from the marker would be very helpful! Thank!
Here is my setMarkers snippet
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var item = locations[i];
var myLatLng = new google.maps.LatLng(item[1], item[2]);
var address1 = item[5];
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
var content = address;
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker, 'mouseover', (function (marker, content, infowindow) {
return function () {
infowindow.setContent(content);
infowindow.open(map, marker);
};
})(marker, content, infowindow));
google.maps.event.addListener(marker, 'mouseout', function () {
infowindow.close();
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
+3
source to share
1 answer
You don't get the function closure for the mouseout handler, but you are using the mouseover handler. To fix the problem, change:
function setMarkers(map, locations) {
for (var i=0; i < locations.length; i++){
var item = locations[i];
var myLatLng = new google.maps.LatLng(item[1], item[2]);
var address1 = item[5];
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
var content = address;
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker,'mouseover', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
google.maps.event.addListener(marker, 'mouseout', function(){
infowindow.close();
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
To:
function setMarkers(map, locations) {
for (var i=0; i < locations.length; i++){
var item = locations[i];
var myLatLng = new google.maps.LatLng(item[1], item[2]);
var address = item[5];
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
var content = address;
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker,'mouseover', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
google.maps.event.addListener(marker, 'mouseout', (function(marker,content,infowindow){
return function() {
infowindow.close();
};
})(marker,content,infowindow));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Snippet of working code:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
setMarkers(map, locations);
}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
['Bondi Beach', -33.890542, 151.274856, , , 'Bondi Beach', 4],
['Coogee Beach', -33.923036, 151.259052, , , 'Coogee Beach', 5],
['Cronulla Beach', -34.028249, 151.157507, , , 'Cronulla Beach', 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, , , 'Manly Beach', 2],
['Maroubra Beach', -33.950198, 151.259302, , , 'Maroubra Beach', 1]
];
function setMarkers(map, locations) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var item = locations[i];
var myLatLng = new google.maps.LatLng(item[1], item[2]);
bounds.extend(myLatLng);
var address = item[5];
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
var content = address;
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker, 'mouseover', (function(marker, content, infowindow) {
return function() {
infowindow.setContent(content);
infowindow.open(map, marker);
};
})(marker, content, infowindow));
google.maps.event.addListener(marker, 'mouseout', (function(marker, content, infowindow) {
return function() {
infowindow.close();
};
})(marker, content, infowindow));
}
map.fitBounds(bounds);
}
html,
body,
#map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
+9
source to share