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の基本知識不足のため、書いていただければ助かります。
お礼
ありがとうございます。 そんなやり方があったのですね。写真を見ることなどなかったので、「写真」の中にそんな機能があるなど気がつきませんでした。 でも、そういう機能はもっとわかりやすいところに置いておいてほしいと思いました。