はじめに
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()">
<br><form name=line_param>
色<input type=text value='#FF0000' name=text_color><br>
太さ<input type=text value='5' name=text_weight><br>
透明度<input type=text value='0.4' name=text_opacity><br>
<input type=button value='再描画' id=button_refresh onclick="LineRefresh()">
</form>
</td></tr>
</table>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
_map = map;
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(135.3659722, 34.72072222), 1);
_objLine = null;
_aobjPoints = new Array(0);
function LineRefresh()
{
var map = _map;
if(_objLine)
map.removeOverlay(_objLine);
_objLine = new GPolyline(_aobjPoints,document.line_param.text_color.value,document.line_param.text_weight.value,document.line_param.text_opacity.value);
map.addOverlay(_objLine);
}
function LineBack()
{
if(_aobjPoints.length > 0)
_aobjPoints.length--;
LineRefresh();
var strData = "";
for(i = 0; i < _aobjPoints.length; i++)
strData += _aobjPoints[i].x + ',' + _aobjPoints[i].y + "<br>";
document.getElementById("label_test").innerHTML = strData;
}
GEvent.addListener(map, 'click', function(objOverlay, objPoint)
{
if(objPoint)
{
_aobjPoints.length++;
_aobjPoints[_aobjPoints.length - 1] = new GPoint(objPoint.x,objPoint.y);
LineRefresh();
document.getElementById("label_test").innerHTML += objPoint.x + ',' + objPoint.y + "<br>";
}
});
//]]>
</script>
</body>
</html>
太字の部分はAPI Keyです（人それぞれ異なる値です）。