Google Maps JavaScript API v3ポリライン（線の描画）
ポリライン
2011/6/26
ポリラインは、地図上に各座標をつなぐ線を描画します。
構文
Polyline options オブジェクトで、ポリラインの線の色、太さ、透明度を指定します。
// LatLng 配列
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
・・・
];
// Polyline オブジェクト
var flightPath=new google.maps.Polyline({
path: flightPlanCoordinates, //ポリラインの配列
strokeColor: '#FF0000', //色（#RRGGBB形式）
strokeOpacity: 1.0, //透明度 0.0～1.0（デフォルト）
strokeWeight: 2 //太さ（単位ピクセル）
});
表参道駅から渋谷駅までのドライブルートにポリラインを引く
2011/6/26
下記のサンプルでは、表参道駅から渋谷駅までのドライブルートにポリラインを引きます。
経由地点の緯度・経度は、Google Directions APIで取得したデータを使用しています。
http://maps.google.es/maps/api/directions/json? origin=omotesando+station &destination=shibuya+station &sensor=false
iPhone
Android設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
<!-- スマートフォン向けviewportの指定 -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!-- Google Maps APIの読み込み -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
/* ページ読み込み時に地図を初期化 */
$(function(){
initialize();
});
/* 地図の初期化 */
function initialize() {
/* 緯度・経度：日本 */
var ne=new google.maps.LatLng(35.668480,139.712330);
var sw=new google.maps.LatLng(35.65835000000001,139.700280);
var shibuya=new google.maps.LatLng(35.65835000000001,139.700730);
var omotesando=new google.maps.LatLng(35.665270,139.712330);
/* 地図のオプション設定 */
var myOptions={
/*初期のズーム レベル */
zoom: 15,
/* 地図タイプ */
mapTypeId: google.maps.MapTypeId.ROADMAP
};
/* 地図オブジェクト */
var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
/* 指定された境界に合うように地図を設定 */
var bounds = new google.maps.LatLngBounds(sw, ne);
map.fitBounds(bounds,15);
/* ★ポリライン */
/*
表参道駅から渋谷駅までのドライブルートにポリラインを引く
stepsの緯度経度はGoogle Directions APIで取得
http://maps.google.es/maps/api/directions/json?origin=omotesando+station&destination=shibuya+station&sensor=false
*/
var flightPlanCoordinates = [
omotesando,
/* steps - 都道413号線*/
new google.maps.LatLng(35.665270, 139.712330),
new google.maps.LatLng(35.668480, 139.705360),
/* steps - 神宮橋（交差点）*/
new google.maps.LatLng(35.668480, 139.705360),
/* 補正 */
new google.maps.LatLng(35.664100, 139.702229),
new google.maps.LatLng(35.659540, 139.702420),
/* steps - 宮益坂下（交差点）*/
new google.maps.LatLng(35.659540, 139.702420),
new google.maps.LatLng(35.659460, 139.700510),
/* steps - 渋谷駅前（交差点）*/
new google.maps.LatLng(35.659460, 139.700510),
new google.maps.LatLng(35.65855000000001, 139.700310),
/* steps - 左折（交差点）*/
new google.maps.LatLng(35.65855000000001, 139.700310),
new google.maps.LatLng(35.65835000000001, 139.700730),
shibuya
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</head>
<body>
<h3>ポリライン</h3>
<p>表参道駅から渋谷駅までのドライブルートにポリラインを引きます。</p>
<!-- 地図の埋め込み表示 -->
<div id="map_canvas"></div>
</body>
</html>
ドライブルートの経由地点にマーカーを立て、運転ルートを情報ウィンドウで表示
2011/6/26
上記のサンプルにプラスして、表参道駅から渋谷駅までのドライブルートの経由地点にマーカーを立てます。 マーカーをクリックすると運転ルートを情報ウィンドウで表示します。
アイコンは、Google Maps Icons（Creative Commons 3.0 BY-SA）を使用しています。
iPhone
Android設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
<!-- スマートフォン向けviewportの指定 -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!-- Google Maps APIの読み込み -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
/* ページ読み込み時に地図を初期化 */
$(function(){
initialize();
});
/* 地図の初期化 */
function initialize() {
/* 緯度・経度：日本 */
var ne=new google.maps.LatLng(35.668480,139.712330);
var sw=new google.maps.LatLng(35.65835000000001,139.700280);
var shibuya=new google.maps.LatLng(35.65835000000001,139.700730);
var omotesando=new google.maps.LatLng(35.665270,139.712330);
/* 地図のオプション設定 */
var myOptions={
/*初期のズーム レベル */
zoom: 15,
/* 地図タイプ */
mapTypeId: google.maps.MapTypeId.ROADMAP
};
/* 地図オブジェクト */
var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
/* 指定された境界に合うように地図を設定 */
var bounds=new google.maps.LatLngBounds(sw, ne);
map.fitBounds(bounds,15);
/* ★ポリライン */
/*
表参道駅から渋谷駅までのドライブルートにポリラインを引く
stepsの緯度経度はGoogle Directions APIで取得
http://maps.google.es/maps/api/directions/json?origin=omotesando+station&destination=shibuya+station&sensor=false
*/
/* steps1 - 都道413号線*/
var steps1_st=new google.maps.LatLng(35.665270, 139.712330);
var steps1_ed=new google.maps.LatLng(35.668480, 139.705360)
/* steps2 - 神宮橋（交差点）*/
var steps2_st=new google.maps.LatLng(35.668480, 139.705360);
var steps2_md=new google.maps.LatLng(35.664100, 139.702229); /* 補正 */
var steps2_ed=new google.maps.LatLng(35.659540, 139.702420);
/* steps3 - 宮益坂下（交差点）*/
var steps3_st=new google.maps.LatLng(35.659540, 139.702420);
var steps3_ed=new google.maps.LatLng(35.659460, 139.700510);
/* steps4 - 渋谷駅前（交差点）*/
var steps4_st=new google.maps.LatLng(35.659460, 139.700510);
var steps4_ed=new google.maps.LatLng(35.65855000000001, 139.700310);
/* steps5 - 左折（交差点）*/
var steps5_st=new google.maps.LatLng(35.65855000000001, 139.700310);
var steps5_ed=new google.maps.LatLng(35.65835000000001, 139.700730);
var flightPlanCoordinates=[
/* 始点:表参道 */
omotesando,
/* steps1 - 都道413号線*/
steps1_st,
steps1_ed,
/* steps2 - 神宮橋（交差点）*/
steps2_st,
steps2_md,
steps2_ed,
/* steps3 - 宮益坂下（交差点）*/
steps3_st,
steps3_ed,
/* steps4 - 渋谷駅前（交差点）*/
steps4_st,
steps4_ed,
/* steps5 - 左折（交差点）*/
steps5_st,
steps5_ed,
/* 終点：渋谷 */
shibuya
];
var flightPath=new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
/* ★アイコン */
var image='/content/img/ajax/gmapv3/marker/car.png';
var marker1=new google.maps.Marker({
position: steps1_st,
map: map,
icon: image
});
var marker2=new google.maps.Marker({
position: steps1_ed,
map: map,
icon: image
});
var marker3=new google.maps.Marker({
position: steps2_ed,
map: map,
icon: image
});
var marker4=new google.maps.Marker({
position: steps3_ed,
map: map,
icon: image
});
var marker5=new google.maps.Marker({
position: steps4_ed,
map: map,
icon: image
});
var infowindow1=new google.maps.InfoWindow({
content: "都道413号線を北西に進む",
maxWidth:200
});
var infowindow2=new google.maps.InfoWindow({
content: "神宮前（交差点）を左折して 明治通り/都道305号線に入る",
maxWidth:200
});
var infowindow3=new google.maps.InfoWindow({
content: "宮益坂下（交差点）を右折する",
maxWidth:200
});
var infowindow4=new google.maps.InfoWindow({
content: "渋谷駅前（交差点）を左折する",
maxWidth:200
});
var infowindow5=new google.maps.InfoWindow({
content: "左折する",
maxWidth:200
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map,marker2);
});
google.maps.event.addListener(marker3, 'click', function() {
infowindow3.open(map,marker3);
});
google.maps.event.addListener(marker4, 'click', function() {
infowindow4.open(map,marker4);
});
google.maps.event.addListener(marker5, 'click', function() {
infowindow5.open(map,marker5);
});
}
</script>
</head>
<body>
<h3>ポリライン</h3>
<p>表参道駅から渋谷駅までのドライブルートにポリラインを引き、経由地点にマーカーを立てます。マーカーをクリックすると運転ルートを情報ウィンドウで表示します。</p>
<!-- 地図の埋め込み表示 -->
<div id="map_canvas"></div>
</body>
</html>