Google Maps API v3 ですべてのインフォウィンドウを閉じる
2023-12-30 02:24:12
質問
私は、自分のウェブサイト上に複数のマーカーを持つGoogleマップキャンバスを作成するスクリプトで忙しいです。私は、あなたがマーカーをクリックしたときに、インフォウィンドウが開くようにしたい。私はそれをやりました、そしてコードは現時点であります。
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
function addMarker(map, address, title) {
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:title
});
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow();
infowindow.setContent('<strong>'+title + '</strong><br />' + address);
infowindow.open(map, marker);
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
addMarker(map, 'Address', 'Title');
addMarker(map, 'Address', 'Title');
これは100%動作します。しかし、私は今、1つのinfowindowが開いていて、2つ目を開きたいとき、最初の1つが自動的に閉じるようにしたい。しかし、私はそれを行う方法を見つけていない。infowindow.close();は助けにならない。誰かこの問題に対する例または解決策を持っていますか?
どのように解決するには?
infowindowはローカル変数であり、close()の時点ではウィンドウは使用できません。
var latlng = new google.maps.LatLng(-34.397, 150.644);
var infowindow = null;
...
google.maps.event.addListener(marker, 'click', function() {
if (infowindow) {
infowindow.close();
}
infowindow = new google.maps.InfoWindow();
...
});
...
関連
-
[解決済み] なぜGoogleはJSONレスポンスにwhile(1);を前置するのでしょうか?
-
[解決済み] JavaScriptの配列で一意な値をすべて取得する(重複を排除する)。
-
[解決済み] Google Maps JS API v3 - シンプルな複数マーカーの例
-
[解決済み] Google Maps APIでマウスのスクロールホイールによる拡大縮小を無効にする方法
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] 兄弟ノードを選択する方法はありますか?
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] querySelectorAllがない場合、ライブラリを使用せずに属性で要素を取得する?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] Node.jsでbase64エンコードされた画像をAmazon S3へアップロードする
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] BlobからArrayBufferへ移行する方法
-
[解決済み] AJAX Mailchimp サインアップフォームの統合
-
[解決済み] JavaScript で `throw` の後に `return` をする必要がありますか?