Question

I use jquery gmap3.

Is it possible to disable running event-listeners temporarily when I show an infowindow and enable them when I click the close-button on my infowindow?

Edit: Here is the function that will be called when the "click"-event is fired (for big infowindow) or mouseover (then the variable "shortwindow" will be "s").

function infoWindow_open(thismap, marker, id, language, shortwindow) {
// Get InfoWindow with AJAX-Request
$.ajax({
    type: "POST",
    url: "getInformation_ajax.php",
    data: "id="+encodeURIComponent(id)+"&language="+encodeURIComponent(language),
    success: function(data) {
        var json = $.parseJSON(data);
        if(json.infownd === null || json.infowndshort === null) {
            return;
        }

        var map = thismap.gmap3("get"),
        infowindow = thismap.gmap3({get:{name:"infowindow"}});
        if(shortwindow == "s") {  // Short infowindow on mouseover
            content_ = "<h class=name_gmap3'>"+json.infowndshort+"</h>";
            $('#test1').gmap3({ 
              map:{
                events:{
                  zoom: 2,
                  minZoom: 1,  // If 0: BUG!?
                  mapTypeId: google.maps.MapTypeId.SATELLITE,
                  //disableDefaultUI: true,
                  //panControl: true,
                  //zoomControl: true,
                  //scaleControl: true
                }}});
            if(infowindow) {
                infowindow.open(map, marker);
                //infowindow.setOptions({alignBottom: true});
                infowindow.setContent(content_);
            }
            else {
                thismap.gmap3({
                infowindow: { anchor:marker, options:{content: content_} }
                });
            }
        }
        else {
            if(infowindow) {
                infowindow.setOptions({maxWidth:350/*, pixelOffet: new google.maps.Size(50,-50)*/});
                infowindow.setContent(json.infownd);
                infowindow.open(map, marker);
            } else {
                thismap.gmap3({
                infowindow: { anchor:marker, options:{content: json.infownd/*, pixelOffet: new google.maps.Size(50,-50)*/} }
            });
          }
        }
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
    // Do nothing!
    //$("#erroutp#").html(textStatus);
    }
});
}
Was it helpful?

Solution

Inside the mouseover-callback(that opens the small window) check the map-property of the big InfoWindow.

When it's not null the big infowindow is open, leave the mouseover-callback without opening the small infoWindow.


Modified code with some improvements(removed duplicate parts, caching of content):

function infoWindow_open(thismap, marker, id, language, shortwindow) {
  //initialize infowindow on first run
  var infowindow  = thismap.gmap3({get:{name:"infowindow"}})
                      ||
                    thismap.gmap3({infowindow: {options:{'shortwindow':'s'} }})
                      .gmap3({get:{name:"infowindow"}}),
       key        = (shortwindow==='s')
                      ?'s':'l',
       //options for the InfoWindow
       iwOpts     = {
                      //small
                      s:{maxWidth:350},
                      //large
                      l:{}
                    },
       //options for the map
       mapOpts    = {
                      //small
                      s:{},
                      //large
                      l:{}
                    },
       //function that sets the content
       //and opens the window
       setOpts    = function(marker){
          //set infowindow-options
          infowindow.setOptions($.extend({},
                                         iwOpts[key],
                                         {
                                          content:marker.get('content')[key],
                                          //property to determine if it's
                                          //a small or large window
                                          shortwindow:shortwindow
                                         }
                                        )
                               );
          //open the infowindow                   
          infowindow.open(marker.getMap(),marker);
          //set map-options
          marker.getMap().setOptions(mapOpts[key]);
       }
  //leave the function onmouseover
  //when a big infowindow is open     
  if(shortwindow==='s' 
      && infowindow.get('shortwindow')!=='s'
        && infowindow.getMap()){
    return;
  }

  if(marker.get('content')){
    console.log('cached');
    setOpts(marker);
    return;

  }


  // Get InfoWindow-content with AJAX-Request
  $.ajax({
    type: "POST",
    url: "getInformation_ajax.php",
    data: "id="+encodeURIComponent(id)+"&language="+encodeURIComponent(language),
    success: function(data) {
        var json = $.parseJSON(data);
        if(json.infownd === null || json.infowndshort === null) {
            return;
        }
        //cache the content as marker-property
        marker.set('content',
                   {s:"<h3 class=name_gmap3'>"+json.infowndshort+"</h3>",
                    l: json.infownd});
        //open infoWindow          
        setOpts(marker);

    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
    // Do nothing!
    //$("#erroutp#").html(textStatus);
    }
});
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top