我无论如何都不能在API的V3版本中只显示一个信息窗口。 我需要一个在下一个打开之前关闭。 另外,希望可以在地图上任何位置单击以关闭信息窗口。 这应该放在初始化函数中吗?
这是我的完整脚本:
// defining vars
var map = null;
var markers = [];
var adUnit;
var center = new google.maps.LatLng(39.676502,-105.162101);
// function that soley initializes the new map object
function initialize() {
var mapOptions = {
zoom: 10,
center: center,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_BOTTOM
},
panControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map($('#map_canvas')[0], mapOptions);
// call the loader function
loadXML();
// Adsense Options
var adUnitDiv = document.createElement('div');
var adUnitOptions = {
format: google.maps.adsense.AdFormat.BUTTON,
position: google.maps.ControlPosition.RIGHT_BOTTOM,
publisherId: 'ca-google-maps_apidocs',
map: map,
visible: true
};
adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
} //<-- Initialize
// load (and map) the markers from XML data
function loadXML() {
$.get('data.xml', function(data) {
// var bounds = new google.maps.LatLngBounds(); //<--- Size map to bounds of markers LatLng
$(data).find('marker').each(function() {
var lat = $(this).attr('lat')
var lng = $(this).attr('lng')
var name = $(this).attr('name')
var type = $(this).attr('type')
var LatLng = new google.maps.LatLng(parseFloat($(this).attr('lat')),
parseFloat($(this).attr('lng')));
var myToggleData = { //<---- collecting data to be toggled on/off
type : $(this).attr('type'),
skill : $(this).attr('skill'),
eta_whatever_that_means : parseFloat($(this).attr('eta'))
}
var marker = new google.maps.Marker({
position : LatLng,
map : map,
icon : 'images/marker.png',
title : $(this).attr('name'),
data : myToggleData
});
var html ='<div id="winBackground"> <div class="winTitle">' + name + '</div> <div class="winHead">Type: <div class="winData">' + type + '</div></div> </div>';
// create the infoWindow
var infoWindow = new google.maps.InfoWindow();
// add a listener to open the infoWindow when a user clicks on one of the markers
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
// bounds.extend(LatLng);
});
// map.fitBounds(bounds);
});
}
// The toggleMarker function
function toggleMarkers(attr,val) {
if (markers){
for (i in markers) {
if(markers[i].data[attr] == val){
var visibility = (markers[i].getVisible() == true) ? false : true;
markers[i].setVisible(visibility);
}
}
}
}