地図上をクリックすると情報ウィンドウが閉じるように設定したい！

1,188 views
Skip to first unread message

Somo

unread,
Dec 12, 2012, 10:24:55 PM12/12/12
to google-map...@googlegroups.com
開いた情報ウィンドウが地図をクリックすると閉じるように設定しようと、

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>

Masashi.K

unread,
Dec 13, 2012, 7:07:52 PM12/13/12
to Google-Maps-API-Japan
こんな感じでできます。
var map, infowindow;
function initialize() {
infowindow = new google.maps.InfoWindow();

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が入ります'
},

suppressInfoWindows : true
});
layer.setMap(map);

google.maps.event.addListener(layer, "click", function(evt) {
infowindow.setOptions({
position : evt.latLng,
content : evt.infoWindowHtml,
pixelOffset : evt.pixelOffset
});
infowindow.open(map);
});

Somo

unread,
Dec 13, 2012, 7:51:42 PM12/13/12
to google-map...@googlegroups.com
Masashi.K 　様

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

早速考えて頂いたものでやってみたのですが、下記のようなメッセージが出て地図を開くことができませんでした。
おかしいですね。

　　JavaScript のアラート
　　Google maps API サーバーでリクエストが拒否されました。リクエスト内で指定した「SENSOR」パラメータには
　　「true」または「false」のいずれかを指定する必要があります。


            from : '1LcWhkgH2hr4FsCDIXJZfDCxds3TWW4GgnVLkhHQ' 

Somo

unread,
Dec 16, 2012, 7:41:45 PM12/16/12
to google-map...@googlegroups.com
Masashi.K 様

お世話になっております。
前回ご提示のあったプログラムをもう一度よく見直し、再度アップさせたところ、
正常に地図を表示することが出来ました。m(_ _)m

ところが、やはり地図上をクリックしても情報ウィンドウを閉じることが出来ません。
すみません。　よろしくお願い致します。m(_ _)m


<!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, infowindow;
function initialize() {
infowindow = new google.maps.InfoWindow();

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 : '1LcWhkgH2hr4FsCDIXJZfDCxds3TWW4GgnVLkhHQ'

Masashi.K

unread,
Dec 16, 2012, 11:15:31 PM12/16/12
to Google-Maps-API-Japan
こうですよ

Somo

unread,
Dec 18, 2012, 9:08:34 AM12/18/12
to google-map...@googlegroups.com
Masashi.K 様

ご回答ありがとうございました。
最後の 「 } 」 が抜けていました。すみませんでした。m(_ _)m
お陰様で開いた情報ウィンドウを閉じることが出来ました。

Google maps API 、奥が深すぎて、素人の私は四苦八苦です。
思うように出来上がった時は、ガッツポーズになってます。（笑）

また、質問することがあるかもしれませんが、その時はよろしくお願い致します。 m(_ _)m
Reply all
Reply to author
Forward
0 new messages