Google Map API を利用して地図上に線を表示する

ここでは地図上の２点間に直線を引く方法を紹介します。

地図が表示されている上に、マーカーが表示されて、さらにその二点を直線で結ぶ、という作業になります。

マーカーを表示する、という所までは地図上にマーカーを表示するで説明していますので、そちらをご覧になってからこちらを読むとわかりやすいと思います。

Google Maps の地図上に線を引く

ここで作るサンプルでは次のように線を引きます。

このコードは次のようになります。「地図上にマーカーを表示する」と異なる箇所だけかいつまんで説明します。

<script type="text/javascript">
$(document).ready(function(){
	...	
	showMap(points);
});

function showMap(points){
	
	...	
	// マーカーの作成	
	for(i=0;i<latlngs.length;i++){
		new google.maps.Marker({
			position: latlngs[i],
			map: map,
			draggable: false
		});
	}

	// 線を引く
	lines = new google.maps.Polyline({
		path: latlngs,
		strokeColor: "#FF0000",
		strokeOpacity: .7,
		strokeWeight: 7
	});

	lines.setMap(map);	
}
</script>

LatLng の配列を渡すだけ

線は Polyline オブジェクトとして作成します。これは２点間を結ぶ線だけではなく、複数のポイントを直線で結ぶことができます。コンストラクタに、直線をなすポイントの LatLng の配列を渡すだけで OK です。

Polyline を作成したら、setMap メソッドで直線を表示する Map オブジェクトを渡します。