5

I'm using the Infobox plugin for Google Maps V3 API (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html)

Is there anyway too close the infobox when the user clicks outside the infobox like on the map?

Nyxynyxx
  • 1,165
  • 7
  • 21
  • 30

3 Answers3

12

it's actually way easier if you have your infowindow as a global variable, or at least hold one variable that represents the single infobox you want to add at a convenient place.

edit: just to clarify: it should not be window.myInfoBox for example. With global I mean a single point where you reference your infobox

google.maps.event.addListener(map, 'click', function() {
    if(infowindow){
       infowindow.close();
    }
});

that's all :-)

MJB
  • 3,934
  • 10
  • 48
  • 72
5

You will want to use addListener()

http://code.google.com/apis/maps/documentation/javascript/events.html#EventListeners

You can adapt the code found here:

google.maps.event.addListener(_point.popup, 'domready', function() {
//Have to put this within the domready or else it can't find the div element (it's null until the InfoBox is opened)

    $(_point.popup.div_).hover(
        function() {
            //This is called when the mouse enters the element
        },
        function() {
            //This is called when the mouse leaves the element
            _point.popup.close();
        }
    );
});

Src: Google Maps API v3 Event mouseover with InfoBox plugin

You can detect a map click with this:

google.maps.event.addListener(map, 'click', function() {

});

Infobox API: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html

Community
  • 1
  • 1
Eddie
  • 12,898
  • 3
  • 25
  • 32
  • Is it possible to add a listener to all (10) markers on my page? Or do I have to add each one individually? – Nyxynyxx Jul 01 '11 at 13:25
  • The code above should work for all markers.. instead of using .hover, use .live('click'... Edit: Just noticed you want it when you click on the map, youll need to mod the code above but its the same sort of idea. – Eddie Jul 01 '11 at 13:27
  • Inside the map click listener, simply loop over your infobox's and apply the close() method. – Eddie Jul 01 '11 at 13:33
0

This maybe useful for you..

var inside = false;
$('#foo').live('mouseenter',function(){ 
    inside=true; 
}).live('mouseleave', function(){ 
    inside=false; 
});
$("body").mouseup(function(){ 
    if(!inside) $('#foo').remove();
});
Sedat Başar
  • 3,740
  • 3
  • 25
  • 28
  • Should I use `.live()` from jQuery or use a `google.maps.event.addListener()` from google maps API? Are both listeners the same? – Nyxynyxx Jul 01 '11 at 13:14
  • .live() is jquery's func so i think u can use just like that if u imported last jquery js file.. – Sedat Başar Jul 01 '11 at 14:14