ここ StackOverflow で見つけたいくつかのことを試しましたが、うまくいきません。私は Javascript にかなり慣れていないので、これを機能させるのが非常に簡単であっても驚かないでしょう。
私はウェブサイト用の Google マップ システムを構築しています。ポップアップの視覚的なスタイルをより細かく制御できるように、infoBox システムを使用しています。私の問題は、常に 1 つの infoBox だけを開きたいということです。したがって、1 つのマーカーがクリックされるとすぐに、前の infoBox が閉じます。最後に開かれたものを追跡するのが最善の方法であることはわかっていますが、すべてを構築するためにループが使用されているため、特定の infoBox のインスタンス名を取得して close() 関数を使用する方法がわかりません。
これが私のJavascriptです：
var map;
var markers = new Array();
// This function builds out the Google Map
function initialize() {
// Set the center point of the map to be create
var mapCenter = new google.maps.LatLng(40.0378755, -76.3055144);
// Create a map object, and include the MapTypeId to add to the map type control.
// This is where we specify the UI settings for the map.
var mapOptions = {
center: mapCenter,
zoom: 8,
disableDefaultUI: false,
panControl: false,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
scaleControlOptions: {position: google.maps.ControlPosition.RIGHT_BOTTOM},
streetViewControl: false,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
// Draw the map on-screen.
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
};
// This function creates pins for the map.
var descriptionBox;
(function () {
google.maps.Map.prototype.markers = new Array();
google.maps.Map.prototype.addMarker = function(marker) {
this.markers[this.markers.length] = marker;
};
})();
//This function builds the locations and information for the markers and infoboxes
function showOverlays() {
//Set data for individual marker
var a = new Array();
var t = new Object();
t.name = "Alert at this Location"
t.desc = "Here's a brief description."
t.lat = 40.3178755
t.lng = -75.9155144
t.icon = "low"
a[0] = t;
//Set data for individual marker
var t = new Object();
t.name = "Moderate priority Issue Here."
t.desc = "Read this text."
t.lat = 40.4178755
t.lng = -75.8155144
t.icon = "mid"
a[1] = t;
//Set data for individual marker
var t = new Object();
t.name = "HIGH PRIORITY!"
t.desc = "This is some text"
t.lat = 40.5178755
t.lng = -75.4155144
t.icon = "high"
a[2] = t;
//Set data for individual marker
var t = new Object();
t.name = "Another Mid Alert"
t.desc = "Description would go here. This is a longer description to show how it would be handled."
t.lat = 39.4178755
t.lng = -77.4155144
t.icon = "mid"
a[3] = t;
//Set data for individual marker
var t = new Object();
t.name = "ALERT!!! READ ME!"
t.desc = "More Text Here"
t.lat = 40.3178755
t.lng = -76.3155144
t.icon = "high"
a[4] = t;
//Gather the data for each individual marker, and put the data in a usable format.
for (var i = 0; i < a.length; i++) {
var latlng = new google.maps.LatLng(a[i].lat, a[i].lng);
var markerIcon = a[i].icon;
var heading = a[i].name;
var description = a[i].desc;
var infoContent = "<h1>"+heading+"</h1><p>"+description+"</p>";
map.addMarker(createMarker(a[i].name,latlng,markerIcon,infoContent));
}
//Builds and places the markers on the map.
function createMarker(name, latlng, icon, infoContent) {
var marker = new google.maps.Marker({position: latlng, map: map, icon: "images/"+markerIcon+"_icon.png"});
//Create event listener to know when a marker is clicked on.
google.maps.event.addListener(marker, "click", function() {
var descriptionBox
descriptionBox = new InfoBox();
//Settings for the infoBox
var myOptions = {
content: infoContent
,boxClass: "myInfoBoxStyle"
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(0, 0)
,zIndex: null
,closeBoxMargin: "2px 2px 2px 2px"
,closeBoxURL: "images/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
//Close any open boxes
descriptionBox.close();
//Create new infoBox instance
descriptionBox = new InfoBox(myOptions);
//Draw infoBox on the map.
descriptionBox.open(map, marker);
});
return marker;
};
};
showOverlays(); を呼び出すクリックされるボタンがあります。地図上にマーカーを表示する機能。
それで、私は何が欠けていますか？どんな助けでも大歓迎です。