CodeIgniter + Google Maps API V3 + close InfoWindo

Question

Anyone have an idea how to make the CodeIgniter Google Maps API v3 library only allow a single info window to be open, and also to make it hide thei nfo window when clicking outside of the info window.

Library: http://www.in-the-attic.co.uk/2010/08/03/google-map-library-for-codeigniter-example-usage-update/

Answer 1

I ended up using a third party plugin called infoBubbles.js to generate some custom infoWindows. Rather than generating an infoBubble for each marker I create a variable, and passed the infoBubbles content through google.maps.marker();. I then stored the markers in an array and when clicked it would go through the array and display the bubble.

Here is the full code:

/**
 * infoBubble Variable
 * This variable is globally defined for defaults that are loaded.
 */
var infoBubble = null;
/**
 * array of all of the markers that are on the map
 * 
 * @type {Array}
 * @author Mike DeVita
 * @copyright 2011 MapIT USA
 * @category map_Js
 */
var markersArray = [];
/**
 * array of all of the sidebar items for all of the markers on the map
 * 
 * @type {Array}
 * @author Mike DeVita
 * @copyright 2011 MapIT USA
 * @category map_Js
 */
var sidebarHtmlArray = [];

/**
 * setPoints(locations)
 * 
 * sets the marker, infoBubble and sidebarItem based on the locations 
 * that were returned from the JSON query.
 * 
 * @param {array} locations array of all of the points, and their settings/html
 * 
 * @author Mike DeVita
 * @author Google Maps API
 * @copyright 2011 MapIT USA
 * @category map_js
 */     
function setPoints(locations){
    infoBubble = new InfoBubble({ 
        map: map, 
        content: 'placeholder', 
        disableAutoPan: false, 
        hideCloseButton: false, 
        arrowPosition: 30, 
        arrowStyle: 0
    }); 

    for (var i = 0; i < locations.length; i++) {
        /** @type {array} reassigns locations array to be point, isolates it to the setPoints() function */
        var point = locations;
        /** @type {google} generates Googles API form of the lat lng passed from var point */
        var myLatLng = new google.maps.LatLng(point[i].lat, point[i].lng);

        /**
         * marker variable, stores all of the information pertaining to a specific marker
         * this variable creates the marker, places it on the map and then also sets some
         * custom options for the infoBubbles.
         * 
         * @type {google}
         */
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            animation: google.maps.Animation.DROP,
            icon: point[i].marker_icon,
            infoBubble_html: point[i].html,
            infoBubble_minWidth: point[i].min_width,
            infoBubble_maxWidth: point[i].max_width,
            infoBubble_minHeight: point[i].min_height,
            infoBubble_maxHeight: point[i].max_height
        });

        /** push the marker to the markersArray to delete or show the overlays */
        markersArray.push(marker);

        var sidebarItem = point[i].sidebarHtmlView;
        sidebarHtmlArray.push(sidebarItem);


        /**
         * add the listeners for the markerClicks and the sideBarClicks 
         * 
         * @type {google}
         * @todo eventDomListener does not work yet, this is the click listener of the sidebar item's
         */
        google.maps.event.addListener(marker, 'click', function(){
            infoBubble.setContent(this.infoBubble_html);
            infoBubble.setMinWidth(this.infoBubble_minWidth);
            infoBubble.setMaxWidth(this.infoBubble_maxWidth);
            infoBubble.setMinHeight(this.infoBubble_minHeight);
            infoBubble.setMaxHeight(this.infoBubble_maxHeight);
            infoBubble.open(map, this);
        }); 
    }   
}

/**
 * addmarker(location)
 * 
 * adds the marker to the map and pushes the marker
 * to the end of the markersArray
 * 
 * @param {google} location LatLng of where the marker should be put
 * 
 * @author Mike DeVita
 * @author Google API
 * @copyright 2011 MapIT USA
 * @category map_js
 */
function addMarker(location, marker_icon){
    marker = new google.maps.Marker({
        position: location,
        map: map,
        animation: google.maps.Animation.DROP,
        icon: marker_icon
    });
    markersArray.push(marker);
}

function addSidebarItem(sidebarItem, i){
    $(document).ready(function(){
        $('#map_items').append('<div id="point_'+i+'">'+sidebarItem+'</div>');
    });

}

/**
 * showOverlays()
 * 
 * display the Overlays that are in markersArray, infoBubbles, sidebarHtmlArray
 * 
 * @author Mike DeVita
 * @author Google API
 * @copyright 2011 MapIT USA
 * @category map_js
 * 
 * @todo add display of infoBUbbles
 */
function showOverlays() {
    /** show the markers */
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(map);
        }
    }
    /** show the side bar items*/
    if (sidebarHtmlArray) {
        for (i in sidebarHtmlArray) {
            var sidebarItem = sidebarHtmlArray[i];
            addSidebarItem(sidebarItem, i);
        }
    }
}

/**
 * deleteOverlays()
 * 
 * delete all of the Overlays that are in markersArray, infoBubbles, sidebarHtmlArray
 * 
 * @author Mike DeVita
 * @author Google API
 * @copyright 2011 MapIT USA
 * @category map_js
 */
function deleteOverlays() {
    /** if markersArray is set, remove the marker off the map, and set it to lenght 0 */
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(null);
        }
        markersArray.length = 0;
    }
    /** if sidebarHtmlArray is set, set it to length 0 */
    if (sidebarHtmlArray){
        sidebarHtmlArray.length = 0;
        $('#map_items div').empty();
    }
}

/**
 * showLoading()
 * 
 * shows the loading animation for the sidebar and map points
 * this helps to notify the user that the content they are trying
 * to load is indeed loading.
 * 
 * @author Jonathan Sampson
 */
function showLoading() {
  $("#loading").show();
  $("#sidebar-loading").show();
}

/**
 * hideLoading()
 * 
 * hides the loading animation for the sidebar and map points
 * this helps to notify the user that the content they are trying to load
 * has been loaded.
 * 
 * @author Jonathan Sampson
 */
function hideLoading() {
  $("#loading").hide();
  $("#sidebar-loading").hide();
}

/**
 * JSON/AJAX Submit for Categories
 * 
 * On submit of #submit JSON query site/process controller
 * returns json encoded arrays of points and their lat/lng, html and sidebarHtml
 * 
 * @return {json_array}
 * 
 * @author Mike DeVita
 * @author Google API
 * @copyright 2011 MapIT USA
 * @category map_js
 */
$(document).ready(function(){

    $('#submit').click(function(){
        var items = $('#categoryList').serialize();
        $('#map_sidebar_controls_container').animate({width:0});
        $('#map_sidebar_button').animate({left:0});
        deleteOverlays();
        showLoading();
        setTimeout(function(){
            $.post("index/process.html", { "items": items },
            function(data){
                var points = data;
                setPoints(points);
                showOverlays();
                hideLoading();
            }, "json");
        }, 275); 
    }); //END SUBMIT CLICK FOR AJAX

    $('#reset').click(function(){
        $('#categoryList').find('input[type=checkbox]:checked').removeAttr('checked');
        deleteOverlays();
    }); //END RESET CLICK FOR RESETTING POINTS AND CATEGORIES
});

/** load the init() function onLoad of the DOM Window */
google.maps.event.addDomListener(window, 'load', init);

Answer 2

If you want only one info window to display at a time (as this is the behavior of Google Maps), you should create only one instance info window.

Hope it helps