• 締切済み

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

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
noname#245585

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答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)
回答No.1

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

noname#245585
質問者

お礼

ご回答ありがとうございます。 当方、全くの素人ゆえ、いろいろと試行錯誤しております。 具体的にどのようにオブジェクトを記載するのでしょうか。 すみませんが、よろしくお願い致します。

関連するQ&A

  • google map吹き出し

    下記google mapをスマホで見ると吹き出しが頻繁に出たり消えたりして見づらいのですが 吹き出しは出しっぱなしでカウントダウンのみ動かす方法ありませんか。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> div#map-canvas { position: absolute; width: 100%; height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var geocoder, map, marker, infoWindow; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(35.710058, 139.810718); var mapDiv = document.getElementById('map-canvas'); var myOptions = { center: latlng, zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(mapDiv, myOptions); google.maps.event.addListener(map, 'click', function(e) { marker = new google.maps.Marker({ position: e.latLng, map: map, draggable: true, title: "Click Me!" }); if(infoWindow) infoWindow.close(); infoWindow = new google.maps.InfoWindow(); var targetDate = Date.parse('2014/07/07 00:00:00'); setInterval ( function() { var now = new Date().getTime(); var diff = targetDate - now; var day = Math.floor ( diff / 86400000 ); diff -= day * 86400000; var hour = Math.floor ( diff / 3600000 ); diff -= hour * 3600000; var minute = Math.floor ( diff / 60000 ); diff -= minute * 60000; var second = Math.floor ( diff / 1000 ); if(infoWindow) infoWindow.setContent ( '七夕まで' + day + '日' + hour + '時間' + minute + '分' + second + '秒' ); },1000); infoWindow.open(map, marker); map.setCenter(e.latLng); }); }; google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>

    • ベストアンサー
    • AJAX
  • Google Map (外部から情報ウィンドウ開く

    Google Maps API v3 において「地図外のHTMLから地図内の情報ウィンドウを開く」ということをやろうとしているのですが、どうにもうまくいきません。 下記コードにおいて、地図外にある「あいうえお商店」や「かきくけこ不動産」をクリックした際、地図内に情報ウィンドウが開くようにするためにはどのようにすればよいでしょうか。 すでに丸3日間悩んでおり、私の力ではどうにもならないと判断したため、皆さまのお力をお借りすることにしました。大変恐れ入りますが、貧弱な知識の私にどうか知恵を与えてやって下さい。どうぞよろしくお願い致します。 深みにはまって抜け出せないコードは以下の通りです。 ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var currentInfoWindow = null; //最後に開いた情報ウィンドウを記憶 function initialize() { var latlng = new google.maps.LatLng(35.67105, 139.743624); var opts = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); // ***************1件目のデータ*************** var m_latlng1 = new google.maps.LatLng(35.675224, 139.737914); var marker1 = new google.maps.Marker({position: m_latlng1,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|3CFFF8|000000',title: '港区赤坂3-3-3' }); var contentString1= '</p>あいうえお商店</p></div>'; var infowindow1 = new google.maps.InfoWindow({content: contentString1 }); // ***************1件目のデータ*************** // ***************2件目のデータ*************** var m_latlng2 = new google.maps.LatLng(35.670772, 139.733875); var marker2 = new google.maps.Marker({position: m_latlng2,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|3CFFF8|000000',title: '港区赤坂5-5-5' }); var contentString2= '</p>かきくけこ不動産</p></div>'; var infowindow2 = new google.maps.InfoWindow({content: contentString2 }); // ***************2件目のデータ*************** google.maps.event.addListener(marker1 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow1.open(map,marker1); currentInfoWindow = infowindow1; }); google.maps.event.addListener(marker2 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow2.open(map,marker2); currentInfoWindow = infowindow2; }); } function myclick(idx) { google.maps.event.trigger(marker[idx],'click'); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 700px; height: 500px"></div> 1 <a href="javascript:myclick(0)">あいうえお商店</a></p> 2 <a href="javascript:myclick(1)">かきくけこ不動産</a></p> </body> </html> ---------------------------------------------------------------- 大変恐れ入りますが、どうぞよろしくお願い致します。

  • googlemapについて教えてください。

    googlemapでマーカーが追随するようにしたくて、function update(position) の関数のはじめにif(marker!=null){marker.setMap(null);}を入れてマーカーを消してから、次のマーカーがつくようにとしたつもりなのですが、うまくいきません。どのようにしたら、現在地にマーカーがつくようになるのでしょうか。下の場合マーカーがたくさんつきます。 よろしくお願いします。 <html> <head> <title>map</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja&v=3.6"></script> <script type="text/javascript"> var gmap; window.onload = function(){ var myLatlng = new google.maps.LatLng( 33 , 130 ); navigator.geolocation.watchPosition(update,poserror,{maximumAge: 30000,enableHighAccuracy:1}); var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; gmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function update(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var myLatlng = new google.maps.LatLng( lat , lng ); gmap.setCenter( myLatlng ); var marker = new google.maps.Marker({ position: myLatlng, map: gmap }); } function poserror(position){alert("error");} </script> </head> <body> <div id="map_canvas" style="width:95%; height:500px ; border:solid 3px #ccc;"></div> </body> </html>

  • GoogleMapsAPIv3でXMLを取得(3)

    お世話になっております。 何度か質問しているのですが、新たに質問したいことがあります。 現在以下の様な形で、GoogleMapsAPIを使ってXMLデータを取得し、表示させています。  function initialize() { var myLatlng = new google.maps.LatLng(16.636192,158.9062); var myOptions = { zoom: 1, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var infowindow = new google.maps.InfoWindow; downloadUrl("xml/allplaces.xml", function(data) { var markers = data.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var linkurl = markers[i].getAttribute("linkurl"); var html = '<div style="height: 150px; width: 200px"><b>'+name+'</b><br />'+linkurl+'</b>'; var marker = new google.maps.Marker({ map: map, position: point, title: name }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } 10行目の downloadUrl("xml/allplaces.xml", function(data) { の部分でXMLを指定していますが、これをHTML上の <input type="button" id="btn" value="" onClick="" /> といった、ボタンファンクションで、異なるXMLを指定したいです。 つまり、クリックすると出ているマーカーは消えて、ほかのマーカーが出るようにしたいです。 分かる方いらっしゃいましたら、どうぞよろしくお願い致します。

  • Google maps API V3 検索ボックス

    Google maps API V3 で、kmlファイルを利用した地図(http://itohiki119.iinaa.net/bousai/test.html) を作成しました。 この地図に検索ボックスを追記したいのですが、上手くいきません。 お知恵をお貸し下さい。m(_ _)m 一応、http://code.google.com/p/gmaps-api-v3-googlebar/downloads/list からダウンロード (1) gmaps-api-v3-googlebarから入手したファイルを解凍。 (2) その中のjGoogleBarV3.jsとdefault.cssを適当な位置に配置。 (3) scriptとlinkを追加。 してみたのですが、ダメでした。 もともとの、htmlは、下記の通りです。 _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>避難所マップ</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&language=ja"></script> <script type="text/javascript"> function initialize() { var initPos = new google.maps.LatLng(34.794267, 134.717400); var myOptions = { zoom : 15, center : initPos, mapTypeId : google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var kmlOptions = {preserveViewport: true} var ctaLayer = new google.maps.KmlLayer('http://itohiki119.iinaa.net/bousai/test.kml', kmlOptions); ctaLayer.setMap(map); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 100%; height: 100%;"><br /></div> </body> </html> _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_ よろしくお願い致します。

  • JavaScriptが実装できない

    初めまして。 Google Maps APIを使ってwebページ上でgoogle mapsを表示させようと思い htmlファイルとjavascriptファイルを実装したのですがうまく動きません。 ソースコードは以下の通りです。 googlemaps.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> html, body { height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.5.0"); </script> <script type="text/javascript" src="googlemaps.js"></script> <title>指定した位置を中心とする地図</title> </head> <body> <p> 緯度<input id="lat" type="text" value="35.632997" /> 経度<input id="lng" type="text" value="139.648609" /> <button id="button">地図を作る</button> </p> <div id="map_canvas" style="width: 100%; height: 90%;"></div> </body> </html> googlemaps.js $(document).ready(function() { $("#button").click(function() { // input要素の値を取得し、マップの中心を決める var lat = $("#lat").val(); var lng = $("#lng").val(); var myCenter = new google.maps.LatLng(lat, lng); // 地図のオプション var myOptions = { zoom : 14, center : myCenter, mapTypeId : google.maps.MapTypeId.ROADMAP // 必須 }; // 地図の生成 var myMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // マーカーの生成 new google.maps.Marker( { position : myCenter, map : myMap, title : "Hello World!" }); }); }); firebugはgooglemaps.js 404 not foundといっているのでhtmlとjavascriptの連携が うまくいってないのだと思うのですが、どうすればいいのかわからず前にすすめません。 お詳しい方、ご教授ください。

  • Google Maps V3のズームの規制

    現在htmlにはhead内に <script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?key=123456&sensor=false"></script> <script language="JavaScript" type="text/javascript" src="v3.js"></script> v3スクリプト内に //functionコード function mapload() { var latlng = new google.maps.LatLng(123,456); var opts = { zoom: 16, center: latlng, //マップタイプHYBRID(航空写真+地図)ROADMAP(地図)SATELLITE(航空写真)TERRAIN(地形) mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { mapTypeId: [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN ] } }; //IDコード var map = new google.maps.Map (document.getElementById("map"),opts); //Marker var LatLng = new google.maps.LatLng(123,456); var contentString = 'ここです!€'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var image = new google.maps.MarkerImage ('アイコンURL', new google.maps.Size(30, 30), new google.maps.Point(0,0), new google.maps.Point(15, 20)); var shadow = new google.maps.MarkerImage ('アイコン影画像URL', new google.maps.Size(30, 30), new google.maps.Point(0,0), new google.maps.Point(15, 20)); var marker = new google.maps.Marker({ position: LatLng, map: map, title: "ここです!",icon: image,shadow: shadow }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); } と記載し、html内のスクリプトのとこに表示しています。 表示される地図のズームを規制したいと考え、mapType.maxZoom = 19; mapType.minZoom = 2;のようなものを記入しても何も変化しません。 上記スクリプトの表記のどこに何を入れれば規制できるのでしょうか。 追伸、google.maps.MapTypeId.TERRAINと地図と地形のみ表示指定しているのですが、実際は、地図と航空地図になります。

  • googlemap v3 のDTD宣言について

    お世話になります。 googleAPI のリファレンスから googlemap v3 のソースを Dreamweavrにコピペしてブラウザで表示できます。 これをDWで「XHTMLに変換」するとまったく表示されません。 どうしたらいいのでしょうか? 1行目のコードが変わるだけなのですが、表示されないのはなぜですか? 他のさくらエディタなどにコピペしても同じ結果です。 サイトはXHTMLで記述しているので統一したいのですが・・・ 地図だけをiframeに入れて、という逃げ方もありますが納得できないのです。 ご存知の方がおられましたら教えてください。 よろしくお願いします。 <html> ↓↓↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { 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); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>

    • ベストアンサー
    • AJAX
  • GoogleMapsAPIv3でXMLを取得(2)

    以前も一度質問しましたが、新たな障壁が出てきたので同じタイトルで質問させていただきます。 Google Maps API v3でサーバー上にあるXMLファイルを利用して、マーカーを出現させようと思います。 現在以下のようなコードで挑戦しています。 <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API v3</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="util.js"></script> <script type="text/javascript"> function initialize() { var myLatlng = new google.maps.LatLng(35.682956, 139.727554); var myOptions = { zoom: 12, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); downloadUrl("http://ja.xml", function(data) { var markers = data.getElementsByTagName("Event"); for (var i = 0; i < markers.length; i++) { var lat = parseFloat(markers[i].getElementsByTagName("Latitude")[0].childNodes[0].nodeValue); var lng = parseFloat(markers[i].getElementsByTagName("Longitude")[0].childNodes[0].nodeValue); lat = lat - lat * 0.00010695 + lng * 0.000017464 + 0.0046017; lng = lng - lat * 0.000046038 - lng * 0.000083043 + 0.010040; var latlng = new google.maps.LatLng(lat,lng); var marker = new google.maps.Marker({position: latlng, map: map}); } }); } </script> </head> このコードの場合、同ディレクトリ、または同サーバーにあるXMLを読み込むとうまく動作したのですが、Web上で公開されているようなXMLだとうまく表示されませんでした。 downloadUrlというのは同サーバーの物しか対応していないのでしょうか。 それとも他に原因が考えられますか? ご存じの方いらっしゃいましたらよろしくお願い致します。

  • 非常に困ってます。Google mapsの作成

    およびスタイルシートの活用 メモ帳にて 以下のソースコードにて試したのですがIEで右側しか表示されないで困ってます。多少いじってます。 このソースコードでmapを表示できるよう指摘をお願いします。 とても長いですが自力ではもう分からなくて手つかずです。 <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>1マップ</title> <style type="text/css"> <!-- h2 { text-align:left; font-size:25px } p { margin-top:0px; text-align:justify; text-justify:distribute; line-height:15pt; font-size:16px; color:black } .text1div { border-style:solid; border-width:4px; border-color:#ffffff; padding:3px; width:330px; height:325px; border:solid 0px; overflow:auto; background-color:white darkblue darkblue white; scrollbar-base-color: #ffffff; scrollbar-highlight-color:#009999; position:absolute; left:410px; top:70px } P.text1 { text-align:justify; text-justify:distribute; line-height:120%; font-size:15px } --> </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></scr ipt> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(座標); var opts = { zoom: 13, center: latlng, scaleControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), opts); var marker = new google.maps.Marker({position: latlng,map: map }); var infowindow = new google.maps.InfoWindow({content:'*****',position: latlng }); infowindow.open(map); </script> </head> <body onload="initialize()"> <h2>My Maps</h2> <div id="map_canvas" style="width:400px; height:300px"></div> <DIV CLASS="text1div"><P CLASS="text1"> マップです。<BR> **市**区*条**丁目*番*号<BR> Tel ***-***-***<BR><BR> <DIV> <DIV align="center"> <form><input type="button" name="OK" value=" Close " onClick="window.close()"></form> </DIV> </body> </html>

    • 締切済み
    • CSS

専門家に質問してみよう