Google マップにマーカーと同心円を入れたい
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'></script>
<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の基本知識不足のため、書いていただければ助かります。
お礼
ありがとうございます。 おっしゃるとおりに試してみたら、距離がはかれました。