CodeIgniter + API Карт Google V3 + закрыть InfoWindow ()

Если вы хотите одновременно отображать только одно информационное окно (поскольку это поведение Карт Google), вы должны создать только одно информационное окно экземпляра.

Надеюсь, поможет

В результате я использовал сторонний плагин под названием infoBubbles.js для создания пользовательских инфо-окон. Вместо создания infoBubble для каждого маркера я создаю переменную и передаю содержимое infoBubbles через google.maps.marker(); , Затем я сохранил маркеры в массиве и, щелкнув, перейдет через массив и отобразит пузырь.

Вот полный код:

 /** * 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); . /** * 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);