締切済み

地図上クリックで情報ウィンドウを閉じるには…

2012/12/13 15:27

Google maps API V3　で開いた情報ウィンドウが地図上をクリックすると閉じるように設定しようと、 google.maps.event.addListener(map,'click',function(){ infowindow.close(); }); を追記したのですが、上手く動いてくれません。どこが悪いのか、お分かりになる方、よろしくお願い致します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>TEST</title> <style type="text/css"> html {height: 100%;} body {text-align: CENTER; height: 100%; margin: 0; padding: 0; background-color:#ffffff; font-size: small;} </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&language=ja"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> var map; function initialize() { var myLatlng = new google.maps.LatLng(35.681373, 139.766084); var myOptions = { zoom: 14, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var layer = new google.maps.FusionTablesLayer({ query: {select: 'Geocodable address', from: 'FusionTablesのIDが入ります'}});layer.setMap(map); } google.maps.event.addListener(map,'click',function(){ infowindow.close(); }); </script> </head> <body> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>

noname#245585

JavaScript
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

みんなの回答

fujillin
ベストアンサー率61% (1594/2576)

2012/12/18 12:59 回答No.2

ANo1です。＞具体的にどのようにオブジェクトを記載するのでしょうか ANo1の参考サイトに挙げたドキュメントに書いてある通りかと思います。よくわかってませんが、上記ドキュメントを元に山手線の駅をマーカー表示して、マップのクリックで情報ウィンドウを閉じる例を… 　* 変数activeInfoがinfoWindowオブジェクトを保持するようにしています。　* 一番最後のほうのイベントのセットが、マップをクリック時の非表示処理です。　* 駅の位置情報取得には外部のデータサービスを利用しています。（全角空白は半角に） <!DOCTYPE html> <html lang="ja"> <head> <title>Sample</title> <style> html, body, div#map_canvas{ height:100%; margin:0; } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&language=ja"></script> </head> <body> <div id="map_canvas"></div> <script type="text/javascript" src="http://www.ekidata.jp/api/l/11302.json" charset="utf-8"></script> <script type="text/javascript"> (function(){ //　マップ表示　var map = new google.maps.Map(document.getElementById("map_canvas"), { 　　center: new google.maps.LatLng(35.68, 139.74), 　　zoom: 12, 　　mapTypeId: google.maps.MapTypeId.ROADMAP 　}); //　マーカークリック時のinfoを表示処理　var markerEvent = function(marker, content){ 　　return function(){ 　　　activeInfo.close(); 　　　activeInfo = new google.maps.InfoWindow({content:content}); 　　　activeInfo.open(map, marker); 　　}; 　} 　var activeInfo = new google.maps.InfoWindow(); 　var stations = xml.data.station_l; //　マーカーを表示　for(var i=0, sta; sta=stations[i++];){ 　　var marker = new google.maps.Marker({ 　　　map: map, 　　　position: new google.maps.LatLng(sta.lat, sta.lon), 　　　title: sta.station_name 　　}); 　　google.maps.event.addListener(marker, "click", markerEvent(marker, sta.station_name)); 　} //　マップクリック時にinfoを非表示　google.maps.event.addListener(map, "click", function(){ 　　activeInfo.close(); 　}); })(); </script> </body> </html>

ログインすると、全ての回答が全文表示されます。

fujillin
ベストアンサー率61% (1594/2576)

2012/12/13 22:58 回答No.1

よくわかっていませんが… 変数infowindowには、InfoWindowオブジェクトが取得されていますか？想像ではオブジェクトが入っていないだけではないかと… https://developers.google.com/maps/documentation/javascript/reference#InfoWindow

質問者