Google マップにマーカーと同心円を入れたい

解決済

質問者：YOKOHAMA-Boy
質問日時：2011/05/22 05:09
回答数：2件

2回目の質問です。前回の掲載期間で、解決できなかったため。
超初心者的質問ですが、教えてください。

Google マップのある地点を中心に、
マーカーと1km/5km/10kmなどの同心円（半透明で外側ライン）の2種を表示をしようとしています。
おのおの単独で表示することは、例がありわかりましたが、
その2つを同時に表示するために、scriptを変更するのがわかりません。

1. マーカーを表示するscript

<script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {

//地図を作成
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(　緯度　,　経度　), 地図サイズ　);

//マーカーを追加(国会議事堂)
var marker = new GMarker(new GLatLng(　緯度　,　経度　));
map.addOverlay(marker);

}
}

//]]>
</script>

2. 同心円を表示するscript

<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false' …

<div id='map' style='width:700px; height:400px;'><br /></div>
<script type="text/javascript">
var myLatLng = new google.maps.LatLng(　緯度　,　経度　);
var myMap = new google.maps.Map(document.getElementById('map'), {
zoom: 地図サイズ,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scrollwheel: false
});
new google.maps.Circle({
center: myLatLng, // 中心点(google.maps.LatLng)
fillColor: '#ff0000', // 塗りつぶし色
fillOpacity: 0.5, // 塗りつぶし透過度（0: 透明 ⇔ 1:不透明）
map: myMap, // 表示させる地図（google.maps.Map）
radius: 95330, // 半径（ｍ）
strokeColor: '#ff0000', // 外周色
strokeOpacity: 1, // 外周透過度（0: 透明 ⇔ 1:不透明）
strokeWeight: 1 // 外周太さ（ピクセル）
});
</script>

この2ヶのscriptをどのようにつなげば、解決できるか教えてください。
JavaScriptの基本知識不足のため、書いていただければ助かります。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2011/05/25 15:29

#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">

</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。できました、感激です。
半径、塗り色、透明度など自分のわかるところを調整して、
完成させます。

通報する

お礼日時：2011/05/25 23:21

No.1

回答者： fujillin
回答日時：2011/05/23 23:09

Google マップはほとんど知らないのですが…

＞おのおの単独で表示することは、例がありわかりましたが
ご提示の例は（確かめていませんが）、それぞれVer2とVer3の例ではないでしょうか？
使用するバージョンをどちらかに決めないとうまくいかないのでは？

例えば、Ver3として（keyが不要なので）、単純にそのままつなげて処理すれば良さそうに思えます。
APIが公開されていますので、それに準じて簡単な例で試してみたら一応表示できました。
＜API V3 リファレンス＞
http://code.google.com/intl/ja/apis/maps/documen …

◇試してみたスクリプト（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 内のマップを書くエリアの指定はどのようになるのでしょうか？
本当に初歩的で申し訳ありません。

補足日時：2011/05/25 08:33

通報する