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&amp;v=2&amp;sensor=false&amp;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を攻略しよう。