メニュー

E-Mail
xml


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

東京駅と有楽町駅を線で結びます。

要点だけ説明すると、、

○ LatLngを配列に格納


var myLatlngs = new Array();
myLatlngs.push(new google.maps.LatLng(35.681382, 139.766084));
myLatlngs.push(new google.maps.LatLng(35.675069, 139.763328));


○ 線を描く

　上記で作成した配列を用いてgoogle.maps.Polylin生成します。


var poly = new google.maps.Polyline({
    path: myLatlngs,
    strokeColor: "#555555",
    strokeOpacity: 0.5,
    strokeWeight: 5
});
poly.setMap(map);



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

○ コードは、下記。


<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() {


    //LatLngを配列に格納
    var myLatlngs = new Array();
    myLatlngs.push(new google.maps.LatLng(35.681382, 139.766084));
    myLatlngs.push(new google.maps.LatLng(35.675069, 139.763328));
    
    //MAPオプションの設定
    var options = {
        //地図のズームサイズ
        zoom: 15,
        //地図の中心地
        center: myLatlngs[0],
        //マップタイプに道路を指定
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    //MAPの生成
    var map = new google.maps.Map(document.getElementById("map"), options);
    
    //線を描く
    var poly = new google.maps.Polyline({
        path: myLatlngs,
        strokeColor: "#555555",
        strokeOpacity: 0.5,
        strokeWeight: 5
    });
    poly.setMap(map);

}


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

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

</body>
</html>



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