Question

I am using the GMAP3 jquery plugin.

I am using the following example to add an infowindow http://gmap3.net/api/add-info-window.html

How can i make the infowindow close when a the mouse is clicked away from the infowindow?

So far i tried

var inside = false;
$('.infowindow').live('mouseenter',function(){ 
    inside=true; 
}).live('mouseleave', function(){ 
    inside=false; 
});
$("body").mouseup(function(){ 
    if(!inside) $('.infowindow').remove();
});

But this keeps the infowindow open but removes the content from the infowindow class.

i have been trying infowindow.close() but cant get it working?

EDIT: Here is the addinfowindow function

function addInfoWindow(lati, longi, name, datestring) {
  // get address
  $("#dispatcher").gmap3({
    action: 'getAddress',
    latLng: [lati, longi],
    callback: function (results) {
      content = results && results[1] ? results && results[1].formatted_address : 'No Address';

      // create infowindow       
      $('#dispatcher').gmap3({
        action: 'addInfoWindow',
        latLng: [lati, longi],
        infowindow: {
          options: {
            content: name
          },
          events: {
            closeclick: function (infowindow, event) {
              //alert('closing : ' + $(this).attr('id') + ' : ' + infowindow.getContent());
            }
          },
          apply: [{
            action: 'setContent',
            args: ['<span class="infowindow">' + name + '<br />' + content + '<br />' + datestring + '<span>']
          }]
        }
      });

    } // end callback

  });
}

Answer 1

If closing on mouse click outside of info window is desired action, following code should work:

var map = creteMap();
var infoWindow = createInfoWindow(map);

 google.maps.event.addListener(map, 'click', function() {
       infoWindow.setMap(null);
 });

Note that createMap() and createInfoWIndow are abstracted. Click event won’t trigger when clicking infow window itself, as it is “above” map object.

Instead of creating infowindow like

$('#dispatcher').gmap3({
        action: 'addInfoWindow',
        latLng: [lati, longi],
        infowindow: {
          options: {
            content: name
          },
          events: {
            closeclick: function (infowindow, event) {
              //alert('closing : ' + $(this).attr('id') + ' : ' + infowindow.getContent());
            }
          },
          apply: [{
            action: 'setContent',
            args: ['<span class="infowindow">' + name + '<br />' + content + '<br />' + datestring + '<span>']
          }]
        }
      });

You should add infoWindow outside of GMAP3 plugin like:

function createInfoWindow(lati, longi, mapDivId,mapOptions, infowindowHtml){
  var map = new google.maps.Map(document.getElementById(mapDivId),mapOptions);

  var latLng = new google.maps.LatLng(lati,lngi);
  var infoWindow = new google.maps.InfoWindow();
  infoWindow.setContent(infowindowHtml);
  infoWindow.setPosition(latLng);
  google.maps.event.addListener(map, 'click', function() {
       infoWindow.setMap(null);
   });

  infoWindow.open(map);
}

For reference on map options take a look at this example

Disclaimer: I haven’t tested this code, so there may be typos and such, but that’s the way to do it outside of GMAP3 plugin.

Edit: Using GMAP3 plugin, it should be doable this way, though I haven’t tried it:

    $('#dispatcher').gmap3({
        action: 'addInfoWindow',
        latLng: [lati, longi],
        callback : function(infoWindowObj) { 
               if(infoWindowObj.getMap() != null){
                      infoWindowObj.getMap().addListener(map, 'click', function() {
                           infoWindowObj.setMap(null); });

               }
        },
        infowindow: {
          options: {
            content: name
          },
          events: {
            closeclick: function (infowindow, event) {
              //alert('closing : ' + $(this).attr('id') + ' : ' + infowindow.getContent());
            }
          },
          apply: [{
            action: 'setContent',
            args: ['<span class="infowindow">' + name + '<br />' + content + '<br />' + datestring + '<span>']
          }]
        }
      });

Please do let me know if this one works.