Google Maps InfoBox and ajax call causing multiple to render

Question

Having an issue with how I have implemented the InfoBox and am wondering if anyone has insight about possible solutions.

Currently I have ~1000 client side markers which are all being dynamically added to the page. They are being generated using the following .

 var cir = new google.maps.Marker({
            position: new google.maps.LatLng(l.lat, l.lng),
            map: map,
            icon: icons[l.type].simple
        });
        addClickHandlerAjax(cir, l);
        l.m = cir;

The method addClickHandlerAjax is what is invoked when the marker is clicked on. Here is the basics of this method .

function addClickHandlerAjax(marker, l) {

    google.maps.event.addListener(marker, "click", function () {

        if(theInfoWindow){
        theInfoWindow.close();
       // InfoWindow = null;
        }
        //get content via ajax
        $.ajax({
            url: 'map/getInfo',
            type: 'get',
            data: {
                'ID': l.f
            },
            success: function (data, status) {
                if (status == "success") {
                    //create infowindow here..
                           theInfoWindow= new InfoBox({
                            content: document.getElementById("infobox-wrapper-hotel"),
                            disableAutoPan: true,
                            enableEventPropagation: true,
                            closeBoxURL: '../assets/images/info-close.png',
                        });
                        theInfoWindow.open(map, marker);
                        touchScroll('rab-scroll');

                });
                }
            },
            error: function (xhr, desc, err) {
                console.log(xhr);
                console.log("Details: " + desc + "\nError:" + err);
            }
        }); // end ajax call
    });
}

The issue is when users click on multiple markers very quickly. The infoboxfor a previous marker could remain opened. But it may contain nothing in it.

Does anyone know how to properly handle multiple infobox by safely closing all instances of the infobox?

I do not see this behavior in this implementation Jsfiddle

Answer 1

The simplest fix: if you only want one InfoBox open at a time, create one in the global scope, and use that for all the markers. The fiddle you reference does that (var ib = new InfoBox(); is the single global InfoBox).

To address the lengthy response time, change your ajax processing to take that into account (only close the existing infowindow when the callback function succeeds):

function addClickHandlerAjax(marker, l) {

    google.maps.event.addListener(marker, "click", function () {

        //get content via ajax
        $.ajax({
            url: 'map/getInfo',
            type: 'get',
            data: {
                'ID': l.f
            },
            success: function (data, status) {
              if (status == "success") {
                // close the existing infowindow only if the AJAX response succeeds
                if(theInfoWindow){
                  theInfoWindow.close();
                }
                // remove the existing infowindow from the map if the AJAX response succeeds                    
                if (theInfoWindow.setMap) theInfoWindow.setMap(null); 
                //create a new infowindow here, with the returned content..
                theInfoWindow= new InfoBox({
                   content: document.getElementById("infobox-wrapper-hotel"),
                   disableAutoPan: true,
                   enableEventPropagation: true,
                   closeBoxURL: '../assets/images/info-close.png',
                });
                theInfoWindow.open(map, marker);
                touchScroll('rab-scroll');
              });
            }
          },
          error: function (xhr, desc, err) {
              console.log(xhr);
              console.log("Details: " + desc + "\nError:" + err);
          }
        }); // end ajax call
    });
}