CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
user1455116
user1455116

Reputation: 2144

How do i let the infowindow stay on mouseout of the marker in google maps?

I need the info window to appear on mouseover over the marker.I want to close the info window when the mouse is anywhere except the info window itself. I need this because, i have a hyperlink on the info window and the user should be able to click on the hyperlink. Right now i have the below code:

marker.addListener('mouseover', function() {
    infowindow.open(map, marker);
  }, false);

  marker.addListener('mouseout', function() {
    infowindow.close(map, marker);
  }, false);

This does not work because the minute i remove the focus from marker the infowindow goes off.

Please let me know. Thanks

Upvotes: 2

Views: 3432

Answers (2)

Papak
Papak

Reputation: 85

Your problem has three parts:

  1. Setting a timeout for handler of marker's mouseover event so that InfoWindow would not disapear until you move your mouse on it.

  2. Clearing that timeout if mouse comes on the InfoWindow:

    var closeInfoWindowWithTimeout;
marker.addListener('mouseout', function() {
    closeInfoWindowWithTimeout = setTimeout(() => infowindow.close(map, marker), 1000);
}, false);        
infoWindowElement.mouseover(() => clearTimeout(closeMarkerInfoWithTimeout));

  3. Setting mouseleave event on the parent of the parent of the parent of your InfoWindow's content. I Know it's dirty and dependent to how Google Maps implemented InfoWindow, but it's all you can do by now.

    Be careful that you should do this after InfoWindow attached to your dom! You can wait for it by listening to domready event of InfoWindow:

    infowindow.addListener('domready', () => {
    infowindowelement.parent().parent().parent().mouseleave(() => infowindow.close(map, marker));
});

    Note that you should use an Element to initialising your InfoWindow's content (Here I used variable infoWindowElement).

Upvotes: 2

Emmanuel Delay
Emmanuel Delay

Reputation: 3679

It sure isn't perfect, but look at this:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var markers = [];  // store the marker objects here
var infoWindow;
var locations = [
  [50,    4],
  [50.5,  4.5],
  [51,    5],
  [51.5,  5.5]
]
var contentStrings = [
  'Hello',
  'World',
  'Foo',
  'Bar'
];
var mouseIn = false;

function initialize() {
  var mapObject = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 8,
    center: new google.maps.LatLng(locations[1][0], locations[1][1]) 
  };
  map = new google.maps.Map(document.getElementById("googleMap"), mapObject);
  // make 1 infowindow.  We will use it again and again
  infoWindow = new google.maps.InfoWindow({
    content: ''
  });
  loadMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);

function loadMarkers() {
  for (var i=0; i<locations.length; i++) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][0], locations[i][1]),
      map: map  // replaces  marker.setMap(map);
    });
    markers.push(marker);  // store the marker in the array
    google.maps.event.addListener(marker, 'mouseover', function () {
      // first we want to know which marker the client clicked on.
      var i=markers.indexOf(this);
      // we set the content of infoWindow, then we open it.
      infoWindow.setContent('<div onmouseout="mouseOutsideInfowindow()" onmouseover="mouseinsideInfowindow()">' + contentStrings[i] + '</div>')
      infoWindow.open(map, markers[i]);
      mouseIn = false;
    });
  }
}
function mouseinsideInfowindow() {
   mouseIn = true;
}
function mouseOutsideInfowindow() {
  if(mouseIn) {
    infoWindow.close();
    mouseIn = false;
  }
}
</script>
<style>
#googleMap {
  height: 400px;
}
</style>
<div id="googleMap"></div>

Upvotes: 1

Related Questions