ポリラインは、地図上に各座標をつなぐ線を描画します。 Polyline オブジェクトは LatLng 配列で構成され、これらの位置を順番に接続する連続した線を作成します。
Polyline options オブジェクトで、ポリラインの線の色、太さ、透明度を指定します。
// LatLng 配列
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
・・・
];
// Polyline オブジェクト
var flightPath=new google.maps.Polyline({
path: flightPlanCoordinates, //ポリラインの配列
strokeColor: '#FF0000', //色(#RRGGBB形式)
strokeOpacity: 1.0, //透明度 0.0〜1.0(デフォルト)
strokeWeight: 2 //太さ(単位ピクセル)
});
サンプル.js 次のコード スニペットでは、Charles Kingsford Smith によるオークランド(カリフォルニア)とブリスベン(オーストラリア)間の初の太平洋横断飛行の航路を示す、2 ピクセル幅の赤いポリラインを作成します
参照先は:Googleコード>Google Maps JavaScript API V3 オーバーレイ>ポリライン
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map
(document.getElementById("map_canvas"),
myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>Google Maps v3 APIを使ったサンプル。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>