CODEWITHSUNDEEP
javascriptgoogle-mapsmouseeventmarkerinfowindow
Julia Kolesnikova
Julia Kolesnikova

Reputation: 25

Could I make Infowindow in Google maps API dissapear when mouse out of marker, but not dissapear when mouse move from marker to him infowindow

In JS I need to make Infowindow on marker close when I make mouse out of it, but infowindow shouldnt dissapear when mouse is over infowindow. Because If there is a scroll in infowindow, user could scroll it (I want to be that).

google.maps.event.addListener(marker, 'mouseover', (function (marker, content, infowindow) {
            return function () {
                if (content != null && content != "")
                {
                    infowindow.setContent(content);
                    infowindow.open(map, marker);
                    if (marker.getAnimation() !== null) {
                        marker.setAnimation(null);
                    } else {                                marker.setAnimation(google.maps.Animation.BOUNCE);
                        console.log(content);
                    }
                }                      
            };
        })(marker, content, infowindow));
     google.maps.event.addListener(marker, 'mouseout', (function (marker, infowindow) {  
                return function () {
                    infowindow.close(map, marker);
                    if (marker.getAnimation() !== null) {
                        marker.setAnimation(null);
                    }
                };                 
        })(marker, infowindow));

Upvotes: 2

Views: 1625

Answers (1)

Iavor
Iavor

Reputation: 2077

Here is a JSBin with a working example. I explain my implementation below.

Move Mouse From Marker to Info Window

Problem: the info window closes immediately when the mouse leaves the marker. This makes it impossible for the user to move the mouse from the marker to the the info window if they want to scroll through any content on the info window.

Solution: create a small delay before closing the info window. This gives the user time to move their mouse from the marker to the info window.

marker.addListener('mouseout', function() {
  timeoutID = setTimeout(function() {
    if (!mouseOverInfoWindow) {
      closeInfoWindow();
    }
  }, 400);
});

After that delay, if the mouse is not hovering over the the info window, close it. If it is hovering over the info window, don't do anything.

Close Info Window On Mouse Out

If you look at the Events section of the InfoWindow class reference, you'll see that info windows do not have a mouseout event like markers.

So, in order to close the info window when the user's mouse moves away from it, you need to get a reference to the info window element on the DOM and add a mouseout event listener to it.

var infoWindowElement = document.querySelector('.gm-style .gm-style-iw');

infoWindowElement.addEventListener('mouseout', function() {
  closeInfoWindow();
  mouseOverInfoWindow = false;
});

Keep in mind, you can only add event listeners to the info window DOM element after you have opened it because opening it adds it to the DOM. This is shown by the following code:

function openInfoWindow(marker) {
  infoWindow.open(map, marker);
  addOpenInfoWindowListeners();
}

I first open the info window (which adds it to the DOM) and then I add the listeners.

Update: Handle multiple markers

Here is an updated JSBin with a map that displays several markers whose info windows have the desired functionality. All I had to do was loop over the data, and for each item, create a marker and event listeners.

markerData.forEach(function(item) {
  var marker = new google.maps.Marker({
    position: item.position,
    map: map
  });

  addMarkerListeners(marker, item.infoWindowContent);
})

I also updated the addOpenInfoWindowListeners method to:

function addOpenInfoWindowListeners() {
  var infoWindowElement = document.querySelector('.gm-style .gm-style-iw').parentNode;

  infoWindowElement.addEventListener('mouseleave', function() {
    closeInfoWindow();
    mouseOverInfoWindow = false;
  });

  infoWindowElement.addEventListener('mouseenter', function() {
    mouseOverInfoWindow = true;
  });
}

I now target the parentNode of the .gm-style .gm-style-iw and listen for the mouseleave and mouseenter events (as opposed to mouseout and mouseover). This enables the hovering functionality to work for info windows that don't have content that can be scrolled.

Upvotes: 2

Related Questions