Any way to hide an infoWindow on a mouse click?

3248
16
Jump to solution
05-13-2012 08:21 AM
JayGregory
New Contributor III
Was curious if anyone's found a way to hide an infoWindow when a user clicks outside the infoWindow (instead of having to click the "x" or click on another map graphic which displays another infoWindow. 
I tried setting a dojo.connect event handlers like dojo.connect(map, "onClick", map.infoWindow.hide()); but that doesn't seem to work. 

Thanks!

Jay
0 Kudos
1 Solution

Accepted Solutions
StephenLead
Regular Contributor III
But clicking on a graphic would then also constitute a click on the map


You can trap for that using:

dojo.connect(map, "onClick", function(evt) {   if(!evt.graphic) {     console.log("map click");   } });

View solution in original post

0 Kudos
16 Replies
StephenLead
Regular Contributor III
I tried setting a dojo.connect event handlers like dojo.connect(map, "onClick", map.infoWindow.hide()); but that doesn't seem to work.


Try this instead:

dojo.connect(map, "onClick", function() {
  map.infoWindow.hide();
});
0 Kudos
JayGregory
New Contributor III
Thanks for the suggestion.  That just seems to hide the infoWindow as soon as it's shown - it's only up for a second.  I also tried
dojo.connect(map.infoWindow, "onShow", function() {
 dojo.connect(map, "onClick", function() {
  map.infoWindow.hide();
 });
 });


and that didn't seem to work either.  Same behavior - just hides the infoWindow right away. 

Jay
0 Kudos
StephenLead
Regular Contributor III
That just seems to hide the infoWindow as soon as it's shown - it's only up for a second.


It sounds like you might be using a mouse click on the map to open the infoWindow in the first place?

What's displayed in the infoWindow - can you trigger it to open when you click on something else( a feature, graphic, or layer) instead?

Steve
0 Kudos
JayGregory
New Contributor III
The infoWindow only shows when you click on a graphic.  But clicking on a graphic would then also constitute a click on the map, which fires the infoWindow.hide() function too, hence the hiding.  I tried setting a handler to only connect the infoWindo.hide() on a mouse click _once_ the infoWindow is shown.  And then as soon as the infoWindow is hidden, diconnect the event handler.  But that didn't work either.
0 Kudos
StephenLead
Regular Contributor III
But clicking on a graphic would then also constitute a click on the map


You can trap for that using:

dojo.connect(map, "onClick", function(evt) {   if(!evt.graphic) {     console.log("map click");   } });
0 Kudos
DavidTreering
New Contributor II
Is there a way to do this yet?  I have the InfoWindow closing automatically by a number of different events,  using:
   function hideInfoWindow(){
    map.infoWindow.hide();
     }


But I can't find an "event" for clicking on the map anywhere to close the infoWindow.
0 Kudos
JayGregory
New Contributor III
Thanks Steven!  That did it!
0 Kudos
DavidTreering
New Contributor II
Thanks Steven!  That did it!


I'm pretty new to JS and I didn't quite get this yet.  Can you explain what I need to do to this?
  dojo.connect(map, "onClick", function(evt) {
     if(!evt.graphic) {
       console.log("map click");
     }
     hideInfoWindow();
  });
   function hideInfoWindow(){
    map.infoWindow.hide();
     }
0 Kudos
JayGregory
New Contributor III
In your case, the hideInfoWindow() is executing outside the if statement - that is, no matter if you clicked on a graphic or not.  You need to move the hide statement inside the if statement, although you can make it simpler by just attaching this handler instead - no need to call the extra function just to execute one line of code.   The !evt.graphic means "if you didn't click on a graphic".  Hope that helps! 

dojo.connect(map, "onClick", function(evt) {
  if(!evt.graphic) {
    map.infoWindow.hide();
  }
});
0 Kudos