はじめに
Google Maps（Google Local）のAPIを利用する方法を簡単に紹介しています。今回 は「地図の中に線を描く方法について」です。スクリプトの変更
3回前に作成したコードに何箇所かコードを追加します。
<!DOCTYPE html PUBLIC "-//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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
v\:*
{
behavior:url(#default#VML);
}
</style>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAJ2A-EncISppmZHF0oZq2MxSIqVgmEE7Z7jvRqG49DJtM7mV-6xQVluTrLna8DIEesDPeKpUSnejCaA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(135.3659722, 34.72072222), 4);
function AddGMarker(objMap,nLatitude,nLongitude,strHtml)
{
var objPoint = new GPoint(nLatitude,nLongitude);
var objMarker = new GMarker(objPoint);
GEvent.addListener(objMarker,"click",function(){ objMarker.openInfoWindowHtml(strHtml); });
objMap.addOverlay(objMarker);
}
AddGMarker(map,135.3659722,34.72072222,"<img src=http://www.dinop.com/google/map/use_html_comment_test.gif align=left>甲子園駅<br><br><a href=http://www.hanshintigers.jp/ target=_blank>阪神タイガース</a>の本拠地としても知<br>られる甲子園球場の目の前にあり<br>ます。<br clear=left>");
AddGMarker(map,135.3585277,34.70730555,"甲子園浜");
var aobjPoints =
[
new GPoint(135.3659722,34.72072222),
new GPoint(135.3585277,34.70730555)
];
var objLine = new GPolyline(aobjPoints,'#FF0000');
map.addOverlay(objLine);
//]]>
</script>
</body>
</html>
赤字が追加する部分です。結構複雑です。太字の部分はAPI Keyです（人それぞれ異なる値です）。
実際に動かすと甲子園駅と甲子園浜の間に赤い線が表示されました。
解説
今回の変更はちょっと複雑なので簡単に解説を入れておきます。線の描画には「VRML」という技術が利用されています。このVRMLをGoogle Maps APIで利用可能にす るための変更が以下の部分になります。
この部分は"決まり文句"です。何も考えずにコピーアンドペーストで利用します。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
v\:*
{
behavior:url(#default#VML);
}
</style>
この部分は線を描く位置を決める部分です。ここでは甲子園駅（東経135.3659722度、北緯34.72072222度） から甲子園浜（東経135.3585277度、北緯34.70730555度）まで線を描くように指定しています。
var aobjPoints =
[
new GPoint(135.3659722,34.72072222),
new GPoint(135.3585277,34.70730555)
];
多角形的に線を描きたい場合は以下のように位置をたくさん指定します。すると位置1～位置6に沿って 線が描かれます。
var aobjPoints =
[
new GPoint(位置1の東経,位置1の北緯),
new GPoint(位置2の東経,位置2の北緯),
new GPoint(位置3の東経,位置3の北緯),
new GPoint(位置4の東経,位置4の北緯),
new GPoint(位置5の東経,位置5の北緯),
new GPoint(位置6の東経,位置6の北緯)
];
実際に線を描くための指定です。ここでは赤（#FF0000）の線を指定しています。
var objLine = new GPolyline(aobjPoints,'#FF0000');
map.addOverlay(objLine);
以下のようにすると緑（#00FF00）で線の太さが15ピクセル、透明度が0.2の（非常に薄い）線を描くことができます。
var objLine = new GPolyline(aobjPoints,'#00FF00',15,0.2);
map.addOverlay(objLine);