- ベストアンサー
Googleマップにマーカーと同心円を表示する方法
- Googleマップにマーカーと同心円を表示するためには、JavaScriptを使用してスクリプトを組み合わせる必要があります。
- まず、マーカーを表示するためのスクリプトを使用して、地図の中心にマーカーを追加します。
- 次に、同心円を表示するためのスクリプトを使用して、指定した半径とスタイルで同心円を追加します。
- YOKOHAMA-Boy
- お礼率42% (23/54)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 ＞間に埋め込んだら、google.～が定義されていませんと出ます。 ＞最初の方に必要な記述があるのでしょうか？ goggle map の本体の読み込みは必須です。（goggle mapを利用するのですから） 参照されている例のどちらにもある（内容は少し違いますが）外部ファイルを読み込んでいる部分が必要です。 以下テストした全ソース。 * この回答欄ではhtt～が自動リンクになってしまうので、ｈttp→httpに * 画像のアドレスは適当なものに変更してください そのまま実行すれば、添付画像のような表示になるはず。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type='text/javascript' src='ｈttp://maps.google.com/maps/api/js?sensor=false'></script> </head> <body> <div id='map' style='width:700px; height:400px;'></div> <script type="text/javascript"> <!-- var myLatLng = new google.maps.LatLng(35.684594,139.75311); //地図を表示 var myMap = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, scrollwheel: false }); //円を3個表示 var i, data = [ [5000, 0.1], [2500, 0], [500, 0] ]; for(i=0; i<data.length; i++){ new google.maps.Circle({ center: myLatLng, radius: data[i][0], fillColor: '#ff0000', fillOpacity: data[i][1], map: myMap, strokeColor: '#ff0000', strokeOpacity: 1, strokeWeight: 1 }); } //マーカーを表示 var markerImage = 'icon1.gif'; var marker = new google.maps.Marker({ position: myLatLng, map: myMap, icon: markerImage }); //--> </script> </body> </html>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
Google マップはほとんど知らないのですが… ＞おのおの単独で表示することは、例がありわかりましたが ご提示の例は（確かめていませんが）、それぞれVer2とVer3の例ではないでしょうか？ 使用するバージョンをどちらかに決めないとうまくいかないのでは？ 例えば、Ver3として（keyが不要なので）、単純にそのままつなげて処理すれば良さそうに思えます。 APIが公開されていますので、それに準じて簡単な例で試してみたら一応表示できました。 ＜API V3 リファレンス＞ http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html ◇試してみたスクリプト（Ver3の場合) var myLatLng = new google.maps.LatLng(35.684594,139.75311); //地図を表示 var myMap = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, scrollwheel: false }); //円を3個表示 var i, data = [[5000, 0.1], [2500, 0], [500, 0]]; for(i=0; i<data.length; i++){ new google.maps.Circle({ center: myLatLng, radius: data[i][0], fillColor: '#ff0000', fillOpacity: data[i][1], map: myMap, strokeColor: '#ff0000', strokeOpacity: 1, strokeWeight: 1 }); } //マーカーを表示 var markerImage = "btn1.gif"; var marker = new google.maps.Marker({ position: myLatLng, map: myMap, icon: markerImage });
補足
すみません。再度質問です。 書いていただいた var myLatLng = new google.maps.～～～ icon: markerImage }); を、<head>内の<script type="text/javascript">～～</script> 間に埋め込んだら、google.～が定義されていませんと出ます。 最初の方に必要な記述があるのでしょうか？ また、html 内のマップを書くエリアの指定はどのようになるのでしょうか？ 本当に初歩的で申し訳ありません。
お礼
ありがとうございます。できました、感激です。 半径、塗り色、透明度など自分のわかるところを調整して、 完成させます。