こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

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>

投稿日時 - 2012-12-13 15:27:28

QNo.7843180

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(2)

ANo.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>

投稿日時 - 2012-12-18 12:59:10

ANo.1

よくわかっていませんが…

変数infowindowには、InfoWindowオブジェクトが取得されていますか?
想像ではオブジェクトが入っていないだけではないかと…

https://developers.google.com/maps/documentation/javascript/reference#InfoWindow

投稿日時 - 2012-12-13 22:58:35

お礼

ご回答ありがとうございます。

当方、全くの素人ゆえ、いろいろと試行錯誤しております。

具体的にどのようにオブジェクトを記載するのでしょうか。

すみませんが、よろしくお願い致します。

投稿日時 - 2012-12-13 23:40:00

-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-