メニュー

E-Mail
xml


ASP.Netのお勉強
VB.Netのお勉強
Excel マクロ・VBAのお勉強
PHPのお勉強
Webデザインのお勉強
Javaのお勉強
総合サイトCocoaLiz
ネイルサロン検索
エステサロン検索
アロマサロン検索
アイビューティーサロン検索
地図に円を描く

東京駅を中心に半径500メートルの円を描きます。

要点だけ説明すると、、

○ 円を描く

　オプションに、円を描く中心、半径、
　外線の色・透明度、塗りつぶしの色・透明度
　を設定し、google.maps.Circleを生成します。


var circleOptions = {
    map: map,
    center: new google.maps.LatLng(35.681382, 139.766084),
    radius: 500,
    strokeColor: "#55555",
    strokeOpacity: 1,
    strokeWeight: 1,
    fillColor: "#555555",
    fillOpacity: 0.35
};
circle = new google.maps.Circle(circleOptions);


○ 作ったサンプルサイトは、こちらです。

○ コードは、下記。


<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Map API V3 円を描く</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">

function initialize() {


    //MAPオプションの設定
    var options = {
        //地図のズームサイズ
        zoom: 15,
        //地図の中心地
        center: new google.maps.LatLng(35.681382, 139.766084),
        //マップタイプに道路を指定
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    //MAPの生成
    var map = new google.maps.Map(document.getElementById("map"), options);
    
    //円を描く
    var circleOptions = {
        map: map,
        center: new google.maps.LatLng(35.681382, 139.766084),
        radius: 500,
        strokeColor: "#55555",
        strokeOpacity: 1,
        strokeWeight: 1,
        fillColor: "#555555",
        fillOpacity: 0.35
    };
    circle = new google.maps.Circle(circleOptions);
}

</script>
</head>
<body onload="initialize()">

<div id="map" style="width: 600px; height: 400px;"></div>

</body>
</html>



Copyright (C) 総合サイトCocoaLiz. All Rights Reserved.