はじめに
Google Maps（Google Local）のAPIを利用する方法を簡単に紹介しています。今回 は「地図の中にクリックで線を描き損ねたときに戻る方法について」です。スクリプトの変更
前回に作成したコードに何行か追加します。
<!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>
<table><tr><td>
<br><br><div id="label_test" style="width: 400px; height: 200px; overflow: scroll; padding: 3px; background-color: white; border: 1px solid black;"></div>
</td><td>
<input type=button value='戻る' id=button_back onclick="LineBack()">
</td></tr>
</table>
<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,"甲子園浜");
aobjPoints =
[
new GPoint(135.3659722,34.72072222),
new GPoint(135.3585277,34.70730555)
];
objLine = new GPolyline(aobjPoints,'#FF0000');
map.addOverlay(objLine);
GEvent.addListener(map, 'click', function(objOverlay, objPoint)
{
if(objPoint)
{
map.removeOverlay(objLine);
aobjPoints.length++;
aobjPoints[aobjPoints.length - 1] = new GPoint(objPoint.x,objPoint.y);
objLine = new GPolyline(aobjPoints,'#FF0000');
map.addOverlay(objLine);
document.getElementById("label_test").innerHTML += objPoint.x + ',' + objPoint.y + "<br>";
}
});
_map = map;
function LineBack()
{
var map = _map;
map.removeOverlay(objLine);
if(aobjPoints.length > 0)
aobjPoints.length--;
objLine = new GPolyline(aobjPoints,'#FF0000');
map.addOverlay(objLine);
var strData = "";
for(i = 0; i < aobjPoints.length; i++)
strData += aobjPoints[i].x + ',' + aobjPoints[i].y + "<br>";
document.getElementById("label_test").innerHTML = strData;
}
//]]>
</script>
</body>
</html>
赤字が変更や追加した部分です。太字の部分はAPI Keyです（人それぞれ異なる値です）。
実際に動かして地図の中をクリックすると線を描くことができ、「戻る」ボタンを押すと線が少しずつ 消えます（甲子園駅と甲子園浜間の座標はボタンを押したときに表示されます）。
解説
今回の変更はちょっと複雑なので簡単に解説を入れておきます。「戻る」ボタンを表示します。ユーザーがボタンを押すとLineBack()という関数が実行されます。
<input type=button value='戻る' id=button_back onclick="LineBack()">
「戻る」ボタンを押したときに呼ばれる関数です。ボタンが押されると中の処理が実行されます。
function LineBack()
{
（処理）
}
現在表示されている線を消します。
map.removeOverlay(objLine);
線を描くための座標を1つ削除します。配列サイズを小さくすることで実現しています。配列の大きさがゼロの場 合はそれ以上削除しません。
if(aobjPoints.length > 0)
aobjPoints.length--;
配列に格納されている全座標を表示します。本当は既に表示されている座標から1行削除するほうがスマートなの ですが、処理が面倒なのでこのようにしています。
var strData = "";
for(i = 0; i < aobjPoints.length; i++)
strData += aobjPoints[i].x + ',' + aobjPoints[i].y + "<br>";
document.getElementById("label_test").innerHTML = strData;
LineBack()関数内ではmapなどの変数をそのまま参照することができません。私自身、Javascriptの知識がほとんど なく、どのようにすれば参照できるように作れるのか分かりませんでした。しようがないのでグローバル変数に関数 内で参照したいオブジェクトを格納することにしました。
aobjPoints =
[
（省略）
];
objLine = new GPolyline(aobjPoints,'#FF0000');
（省略）
_map = map;