google-mapsinfowindow

Bring GoogleMaps InfoWindow to front


I have a GoogleMaps APIv3 application in which multiple InfoWindows can be open at any one time. I would like to be able to bring an obscured InfoWindow to the front of all other InfoWindows if any part of it is clicked - similar to the behaviour of windows in MS Windows OS.

I had thought to add an onclick event handler which increases the z-index of the InfoWindow, but the event handler does not appear to be firing. ZIndex is a global variable that keeps increasing as InfoWindows are clicked - or thats the theory anyway.

Can anyone help ? Here is my code:-

var ZIndex=1;
var iw = new google.maps.InfoWindow({ content:contentString });
google.maps.event.addListener(iw, 'click', handleInfoWindowClick(iw) );

function handleInfoWindowClick(infoWindow) {
   return function() {
      infoWindow.setZIndex(ZIndex++);
   }
}

Solution

  • there is no click-event for an infoWindow, it's a little bit more difficult.

    1. you'll need to use an element(not a string) as content for the infowindow, because you need a DOMListener instead a listener for the infowindow-object
    2. when domready-fires, you must apply the click-DOMListener to the anchestor of this content-node that defines the infowindow

    The following code will do this for you, add this to your page:

    google.maps.InfoWindowZ=function(opts){
              var GM = google.maps,
                  GE = GM.event,
                  iw = new GM.InfoWindow(),
                  ce;
    
                 if(!GM.InfoWindowZZ){
                    GM.InfoWindowZZ=Number(GM.Marker.MAX_ZINDEX);
                 }
    
                 GE.addListener(iw,'content_changed',function(){
                   if(typeof this.getContent()=='string'){
                      var n=document.createElement('div');
                          n.innerHTML=this.getContent();
                          this.setContent(n);
                          return;
                   }
                   GE.addListener(this,'domready',
                                   function(){
                                    var _this=this;
                                    _this.setZIndex(++GM.InfoWindowZZ);
                                    if(ce){
                                      GM.event.removeListener(ce);
                                    }
                                    ce=GE.addDomListener(this.getContent().parentNode
                                                      .parentNode.parentNode,'click',
                                                      function(){
                                                      _this.setZIndex(++GM.InfoWindowZZ);
                                    });
                                  })
                 });
    
                 if(opts)iw.setOptions(opts);
                 return iw;
            }
    

    Instead of google.maps.InfoWindow() you must call now google.maps.InfoWindowZ()

    It also returns a genuine InfoWindow, but with the mentioned listener applied to it. It also creates the node from the content when needed.

    Demo: http://jsfiddle.net/doktormolle/tRwnE/


    Updated version for visualRefresh(using mouseover instead of click) http://jsfiddle.net/doktormolle/uuLBb/