線を表示する

<!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=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" 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 GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(137.95349836349487, 36.11501414709515), 2);

function drawLine()
{
var mapPoints =[ new GPoint(137.95349836349487, 36.11501414709515), // 塩尻市役所
new GPoint(137.9720163345337, 36.237999619827065), // 松本市役所
new GPoint(137.96929121017456, 36.23846690961747) // 松本城
];
map.addOverlay(new GPolyline(mapPoints, "#ff0000",10,0.5));
}
//]]>
</script>
<form>
<input type="button" value="線を描画" onClick="drawLine()" />
</form>
</body>
</html>

・サンプルを実行する
Ajax逆引きクイックリファレンス 説明などは本書を参考にしてください。