Googleマップサンプル集もいよいよ大詰め。
クリックすると2点間の距離を測定し、また、マーカーのアイコンの変更を行って地図に書き込む。
作成したHTML文書はこちら。
以下にソースの説明をしていきます。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<meta http-equiv="Content-Language" content="ja"
/>
<meta http-equiv="Content-Style-Type"
content="text/css" />
<meta http-equiv="Content-Script-Type"
content="text/javascript" />
<title>Google map</title>
<script src="http://maps.google.com/maps? file=api&v=2&sensor=false&key=
ABQIAAAAJXYwFgs3R54rlXBVQrZ-
QRSQX0zcyHiuBBtvLf60RI8qT6jGRBQ
Gp1BCIcxnSAnD57RevlOVEHHbMQ"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
var x = 35.186225462776335;
var y = 136.8989610671997;
var z = 13;
map.setCenter(new GLatLng(x, y), z);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var point = new GLatLng(x, y);
map.addOverlay(new GMarker(point));
map.openInfoWindow(point,document.createTextNode("名古屋の中心名古屋城"));
var ICONS = [];
var icon = new GIcon();
icon.image = "hata.gif";
icon.iconAnchor = new GPoint(16, 16);
icon.infoWindowAnchor = new GPoint(16, 0);
icon.iconSize = new GSize(26, 24);
ICONS[0]=icon;
↑
マーカーのアイコンの設定。icon.iconAnchorでマーカー表示するときの位置を設定する。
icon.iconAnchorは設定しておかないと表示されない。
icon.iconWindowAnchorで情報ウィンドウの位置を指定。なくても問題ない。
icon.iconSizeでアイコンのサイズを設定。
ICONS[0]はアイコンを複数登録したいため配列にした。
GEvent.addListener(map,"click", function(overlay,latlng)
{
if (overlay) {
// ignore if we click on the info
window
return;
}
var polyline =
new GPolyline([
new GLatLng(x,y),
new GLatLng(latlng.lat(),latlng.lng())
], "#ff0000", 10, 1);
↑
GPolyline([],a,b,c)の[]で2点間の距離をmで測定してくれる。
後のa,b,cは2点間を結ぶ線の設定。
map.addOverlayで2点間の線を表示させることができるが、今回は表示しない。
var value = polyline.getLength();
value = value / 1000;
var myHtml = "緯度:"+latlng.lat()+"<br/>経度:
"+latlng.lng()+"<br/>名古屋城からの距離:"+value+"km";
map.openInfoWindow(latlng, myHtml);
map.addOverlay(new
GMarker(latlng, { icon: ICONS[0] }));
↑
マーカーを追加するが、iconは設定したICON[0]で表示する。
});
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px;
height: 400px"></div>
<p id=aa>a</p>
<p id=bb>b</p>
</body>
</html>
だいぶGoogle
Maps API リファレンスにも慣れてきた。
サンプル集とAPIリファレンスがあるので、初心者の私でも理解しやすい。
初めてAPIという代物に挑戦するにはGoogleマップがやっていて面白くて理解しやすいのではないかと思う。
ここまできたら、位置ゲーもどきを作って、Googleマップは終了しよう。
次のAPIを攻略しよう。