0
複数のマーカーでGoogleマップを追加しようとしています。すべてのマーカーに情報ウィンドウがあります。私はすべての情報ウィンドウをページの読み込み時にデフォルトで表示するようにしたい。誰かが地図上またはマーカー上をクリックすると、すべての情報ウィンドウを閉じてから、マーカーをクリックして表示する必要があります。ここで複数のマーカーを含むGoogleマップを追加する方法読み込み時にインフォインディーズを表示する方法
は、私はそれを達成しようとしている方法です：
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map {
height: 100%
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var locations = [
['loan 1', 33.890542, 151.274856, 'address 1'],
['loan 2', 33.923036, 151.259052, 'address 2'],
['loan 3', 34.028249, 151.157507, 'address 3'],
['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
['loan 5', 33.950198, 151.259302, 'address 5']
];
function initMap() {
var latlng = new google.maps.LatLng(locations[0][1], locations[0][2]);
mapOptions = {
zoom: 8,
center: latlng
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < locations.length; i++) {
var icon = '';
if (locations[i][0].length != '' && locations[i][1].length != '') {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
title: locations[i][3],
});
var contentString = 'Title on Load';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 160
});
infowindow.open(map, marker);
// Event that closes the Info Window with a click on the map
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var contentString = 'Title on Click';
infowindow.setContent(contentString);
infowindow.open(map, marker);
}
})(marker, i));
}
}
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>上記のコードは正常に動作しますが、それは重複した情報ウィンドウが表示されます。クリックすると、ロード時に開いている情報ウィンドウは閉じる必要がありますが、閉じていません。
は何ですか投稿されたコードの問題？ – geocodezip
投稿されたコードにエラーがあり、マップが機能しません（ズームがないのでマップが正しく初期化されていないので、 'locations'配列は各エントリに3つのメンバしか持たないので' locations [3] 'doesn存在しない）。私がこれらを修正すると、インフォボックスはページの読み込み時にすべてのマーカー（その両方）で開きます。 – geocodezip
私は今旅行中です。コードを更新します。問題は、コードを追加するとうまくいきますが、配列の最後のアドレスが2つの情報ウィンドウを開きます。私が地図をクリックすると、すべての情報ウィンドウが閉じられます。 –