Google Mapでチェックボックスを使い、wikiを表示させたり非表示にする方法
- Google Mapでチェックボックスを使ってwikiを表示させたり非表示にする方法について教えてください。
- IE（８）、Chrome（５）、FireFOX（１）で確認しましたがうまくいきません。
- ページをロードするとGoogle Mapが表示され、Wikiのチェックボックスをチェックするとwikiが表示されることは確認できましたが、チェックを外すとwikiが非表示になりません。どのようにすれば解決できるでしょうか？
- ベストアンサー
Google Mapでチェックボックスを使い、 wikiを表示させたり
Google Mapでチェックボックスを使い、 wikiを表示させたり非表示にしたいのですが、 うまくいきません。 どなたかご教示頂けませんか？ ＩＥ（８）、Ｃｒｏｍｅ（５）、ＦｉｒｅＦＯＸ（１）で確認しました。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script src="http://maps.google.co.jp/maps?sensor=false&file=api&v=2&key=--KEY--" type="text/javascript"></script> <title>Title</title> </head> <body> <div id="map" style="width: 600px; height: 600px"></div><br> <FORM name="f1"> <INPUT type="checkbox" onClick="getCheck(0)">Wiki<br> </FORM> <script type="text/javascript"> //<![CDATA[ var map = new GMap2( document.getElementById("map")); function load(){ var centerPos = new GLatLng(35.6984,139.7732); map.setCenter(centerPos, 13 ); } function getCheck(obj){ var wiki = new GLayer("org.wikipedia.ja"); //チェックボックスをチェックするとwikiが表示される → うまくいく if (document.f1.elements[0].checked == true) { map.addOverlay(wiki); }else{ //チェックが外されるとwiki非表示 → うまくいかない map.removeOverlay(wiki); alert("test"); //チェック外すとここは出る。 } } //ページがロードされたら、load 関数を実行して、地図を表示する window.onload = load; //ページを抜けるとき、メモリ開放 window.onunload = GUnload; //]]> </script> </body> </html>
- jianyuanyu
- お礼率50% (4/8)
- JavaScript
- 回答数2
- ありがとう数13
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
効率よくするなら、 <body> <div id="map" style="width: 600px; height: 600px"></div><br> <form name="f1"> <input type="checkbox" />Wiki<br /> </form> <script type="text/javascript"> //<![CDATA[ window.onload = load; window.onunload = GUnload; var map; function load(){ map = new GMap2( document.getElementById("map")); var centerPos = new GLatLng(35.6984,139.7732); map.setCenter(centerPos, 13 ); var wiki = new GLayer("org.wikipedia.ja"); map.addOverlay(wiki); wiki.hide(); if(document.f1.elements[0].checked == true){ wiki.show(); } GEvent.bindDom(document.f1.elements[0],"click",wiki,function(eve){ var node = eve?eve.target:event.srcElement; if (node.checked == true) { wiki.show(); }else{ wiki.hide(); } }); } //]]> </body> ですね。
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
<INPUT type="checkbox" onClick="getCheck(0)">Wiki<br> function getCheck(obj){} のような直接のDOMのonclickイベント追加は止めて、 <form name="f1"> <input type="checkbox" checked="false" />Wiki<br /> </form> に対し、 load()のファンクション内に var wiki = new GLayer("org.wikipedia.ja"); GEvent.bindDom(document.f1.elements[0],"click",wiki,function(){ if (document.f1.elements[0].checked == true) { //wiki.show(); map.addOverlay(wiki); }else{ //wiki.hide(); map.removeOverlay(wiki); } }); if(document.f1.elements[0].checked == true){ map.addOverlay(wiki); } と書けばよい。 ※本当は、removeOverlayやaddOverlayを都度やるより、 GLayerオブジェクトのhide(),show()のメソッドを使った 方がよさげです。
関連するQ&A
- google map api v3の表示の不具合について教えてください
google map api v3の表示の不具合について教えてください。 google map api v3を実装してマーカーをつけたのですが、あれこれ直していたら表示されない箇所ができてしまいました。（下記画像参照） ソースは下記です。 <!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> <title>××</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/page.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> google.maps.event.addDomListener(window, 'load', function() { var mapdiv = document.getElementById("map"); var myOptions = { zoom: ズーム, center: new google.maps.LatLng(緯度, 経度), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; var map = new google.maps.Map(mapdiv, myOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(緯度, 経度), map: map, title: '名称' }); }); </script> </head> <div id="map"></div> お手数かけて申し訳ありませんが、ホームページ初心者なのでご指導いただければ助かります。 なにとぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- google map api のIE7の表示のバグについて教えてくださ
google map api のIE7の表示のバグについて教えてください。 google map api を実装したのですが、モダンブラウザとIE8では、問題無く表示されるのですが、IEではバージョンが7以下のブラウザでは、地図表示部分がグレーになってしまって全く表示されません。 IE6以下のブラウザは仕方無いとしても、IE7では正常に表示させたいのですが、どうしたらバグを解消できるか教えてください。 google map apiは、最新の「Version 3」を利用しました。 ソースは下記です。 <!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> <title>××</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/page.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function() { var mapdiv = document.getElementById('map'); var myOptions = { zoom: ズーム, center: new google.maps.LatLng(緯度, 経度), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, }; var map = new google.maps.Map(mapdiv, myOptions); }); </script> </head> <div id="map"></div> いろいろなサイトを見て調べてやってみたのですが上手くいきませんでした。 お手数かけて申し訳ありませんが、ホームページ初心者なのでご指導いただければ助かります。 なにとぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- google mapをiframeで表示させた後、GoogleMapA
google mapをiframeで表示させた後、GoogleMapAPIを使用して地図を カスタマイズする方法を教えてください。 Google Map APIおよび、htmlのコーディングに関しても全くの初心者です。 マップ上にマーカーを表示させたくて下記のように見よう見まねでプログラミングしましたが 地図は表示されますが、マーカーが表示されませんでした。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2& …キー]" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); var marker = new GMarker(new GLatLng(34.685567, 135.527467)); map.addOverlay(marker); } } //]]> </script> </head> <iframe width="600" height="600" frameborder="1" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps/ms?ie=UTF8&hl= … msid=..................;z=5&output=embed"> </iframe> </html> 関数を記述する場所がまちがっているのか、ほかに記述するべき関数がいるのか、 大変初歩的で申し訳ないのですが、ご回答のほどよろしくお願いします。
- ベストアンサー
- HTML
- googleMapのマーカーがうまく表示されません
googleMapを使って地図を表示させていますが、MarkerやopenInfoWindowといった関数の部分が上手く表示されません。具体的なスクリプトはこんな感じです。 <!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"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAREfirLNOQkMPltS0MtM_aRT2vOvOMLA6ksVZJNRPEoKnAz-wSxSLgFyYzSPMTRAqy1S4fTvUnXKX-g" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.689488, 139.691706), 20); map.addControl(new GLargeMapControl()); map.centerAndZoom(new GPoint(35.689488, 139.691706), 20); //マーカー var marker=new GMarker(new GPoint(35.689488, 139.691706)); map.addOverlay(marker); //吹き出し var msg="ここです"; map.openInfoWindowHtml(map.getCenterLatLng(),msg); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 500px; height: 500px"></div> <script type="text/javascript"> </body> </html> どなたかご教授くださると助かります。 宜しくお願いいたします。
- ベストアンサー
- JavaScript
- GoogleMapを複数表示させたい
GoogleMap を API で２つ表示させて、それぞれの地図にマーカーをひとつずつつけたいです。 マーカーをつけて吹き出すをだすまではできたのですが、 マップをもうひとつ増やすにはどのように記述すればよいでしょうか？ 現在のソースは以下です -------------------------------------------------------- <!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 http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> #Gmap{ width:500px; height:500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=http://maps.google.com/maps?file=api&v=2&key=" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { //地図を作成 var map = new GMap2(document.getElementById("Gmap")); map.setCenter(new GLatLng(35.675845,139.744763), 15); //マーカーを作成 var marker = new GMarker(new GLatLng(35.675845,139.744763)); //マーカーをクリックしたら、吹き出しの中に写真を表示する GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("テキストが入ります"); }); //マーカーを地図上に配置 map.addOverlay(marker); //縮尺移動のコントロールを設置 map.addControl(new GLargeMapControl()); //地図衛星写真 切り替えボタンを表示 map.addControl(new GMapTypeControl()); //縮尺表示 map.addControl(new GScaleControl()); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="Gmap"></div> </body> </html> -------------------------------------------------------- よろしくお願いいたします
- ベストアンサー
- その他（プログラミング・開発）
- グーグルマップの初期表示地点のリストボックスでの選択
宜しくお願いします。 以下のような、XMLファイルを使用してグーグルマップに複数のマーカーを表示させるスクリプトが 在ります。XMLファイルは、kmlsample1.kml、kmlsample2.kml、kmlsample3.kmlを設定し、 スクリプト中の[URL指定]の箇所に各ファイルの存在するフォルダを絶対パスで指定します。 HTMLにあるリストボックスでマーカーを地図に表示させるkmlファイルを選択するのですが、 このスクリプトでは、どのkmlファイルを選んでも初期の地図の表示中心地点がJavaスクリプト中の 「//地図を作製」から2行下で指定されている(43.068625, 141.350801)の地点でしか、 表示されない仕様になっています。 選んだセレクトボックスにより3通りの表示地点が現れるようにしたいのですが、 方法が分かりません。 どの様に書き換えれば良いのかご教授をお願い致します。 ========= Java・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" xml:lang="ja" lang="ja"> <head> <title>Google Maps </title> <script src=""http://maps.google.co.jp/maps?file=api&v=2&key=[GoogleMaps APIキー]"type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map; var geoXml = null; function load() { if (GBrowserIsCompatible()) { //地図を作成 map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(43.068625, 141.350801), 12); ←*ABCによって変更したい map.addControl(new GLargeMapControl()); markerChange(document.getElementById("markerSelect")); } } function markerChange(selectBox){ var kmlFile = selectBox.options[selectBox.selectedIndex].value; if(geoXml){ map.removeOverlay(geoXml); } geoXml = new GGeoXml("http://[URL指定]/" + kmlFile); map.addOverlay(geoXml); } GEvent.addDomListener(window, "load", load); GEvent.addDomListener(window, "load", prettyPrint); GEvent.addDomListener(window, "unload", GUnload); //]]> </script> </head> <body> <TR><font size="3">例：セレクトボックスで選択したマーカーを表示する(KML)</font></TR> <div id="map" style="width: 1000px; height: 600px"></div> <p>各区にある店舗<br /> <select id="markerSelect" onChange="javascript:markerChange(this);"> <option value="kmlsample1.kml" selected="selected">A区</option> <option value="kmlsample2.kml">B区</option> <option value="kmlsample3.kml">C区</option> </select> ========================XMLファイル例「kmlsample1.kml」=========== <?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://earth.google.com/kml/2.2"> <Document> <Folder> <name>A区の物件</name> <Placemark> <name>第一マンション</name> <description><![CDATA[<a href="" target="_blank">詳細</a>]]> </description> <Point><coordinates>14○.357234, 4○.038694, 0</coordinates></Point> ←○は任意の半角数字 </Placemark> <Placemark> <name>第二マンション</name> <description><![CDATA[<a href="" target="_blank">詳細</a>]]> </description> <Point><coordinates>14○.334967, 4○.035413, 0</coordinates></Point> ←○は任意の半角数字 </Placemark> </Folder> </Document> </kml> </body> </html>
- ベストアンサー
- JavaScript
- javascriptでgooglemapを表示させたいのですが、fir
javascriptでgooglemapを表示させたいのですが、firefoxで表示できず、空白になってしまいます。 IEでは問題なく表示できています。何が問題でしょうか。 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" id="sixapart-standard"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="http://maps.google.com/maps?file=api&v=2&key=xxxxxx" type="text/javascript"></script> <script type="text/javascript" src="http://xxxxx.xxx/test.js"></script> </head> <body> <div id="map" style="width: 450px; height: 300px"></div> </body> </html> test.js部分です。 window.onload = function() { var map = null; var geocoder = null; if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.67431, 139.69082), 13); // GClientGeocoderを初期化 geocoder = new GClientGeocoder(); } if (geocoder) { geocoder.getLatLng( "東京都xx区xx", function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml("ここが目的地です。"); } } ); } }
- ベストアンサー
- JavaScript
- googleマップがWinIEのみエラーになってしまします。
googleマップの地図をサイトに入れているのですが、WinIEのみ６も７も表示されません。FireFOX,Safariなどは閲覧できます。 地図が表示されないだけでなく、ページ自体がエラーで表示できなくなってします。(地図以外の静的なHTMLも) 記述以下 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>タイトル</title> </head> <script src="http://maps.google.co.jp/maps?file=api&v=2&key=キー" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.centerAndZoom(new GPoint(緯度を入れています), 0); var point = new GPoint(緯度を入れています); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindow("<!--<img src=images/byld.jpg>--><img src=/images/logo02.gif>"); //]]> </script> 原因かどうか解りませんが、同じURLでAPIキーを取得2回取得しています。（1回目のキーを忘れてしまったので） 何かおわかりのことがありましたら教えてください。よろしくお願いします。
- 締切済み
- JavaScript
- JavaScriptを使ってWebページにメッセージを表示させる
html内に<div id="info"></div>と書き、それをjavascriptのプログラムから「こんにちは」というメッセージを表示させるようにしたいのですが、何度試しても製作途中の段階でdocument.getElementById(id) has no propertiesというエラーが出てしまいます。（←Firebugでエラーが検出されます） どこが間違っているのか教えていただけると助かります。 ================= HTML ================= <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>map</title> <link rel="stylesheet" type="text/css" href="common/css/main.css" /> <script src="common/js/main.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="info"></div> </body> </html> ================= JavaScript ================= var map window.onload = function() { load(); } function _d(id, htmlTxt) { document.getElementById(id).innerHTML = htmlTxt; } _d("info","こんにちは");
- 締切済み
- JavaScript
- Google maps API のマーカーを増やす
お恥ずかしながらJavascriptが全く分からない者です。 しかし、必要が生じ、いじっていますが、 下記のソースで、マーカーの個数を増やす場合、 何処のソースをどのように増やせばいいのでしょうか？ また、その他やり方がありましたら、 ご教授いただければと思い、 質問させていただきました。 よろしくお願いいたします。 <!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> <title>テスト</title> <link href="../../css/css.css" rel="stylesheet" type="text/css" /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script src="?http://maps.google.com/maps?file=api&v=2&key=?＊＊＊＊" type="text/javascript"></script> </head> <body> <h1>テスト</h1> <div id="map" style="width: 500px; height: 300px"></div> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); var point = new GLatLng(35.852766, 139.794382); map.setCenter(point, 16); var marker = new GMarker(point); map.addOverlay(marker); GEvent.addListener(map, 'click', function(overlay, point) { if (overlay) { overlay.openInfoWindow( document.createTextNode("テスト")); } }); } //]]> </script> </body> </html>
- ベストアンサー
- HTML
お礼
詳しく解説いただき、コードまでありがとうございました。 とても勉強になりました！！