<?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" xmlns:v="urn:schemas-microsoft-com:vml"
  xml:lang="jp" lang="jp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>例14-7 GoogleマップのAPIの使用例</title>
<head>
<style type="text/css">
/* GoogleマップのIE用の指定。必ずこれを入れる */
  v\:* {
    behavior:url(#default#VML);
  }
</style>
<!-- Googleマップのライブラリの読み込み。
プログラムキーは要変更。変更しなくてもローカルで試すことは可能。 -->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=XXXXXXX"
	type="text/javascript"></script>
</script>
</head>

<body onunload="GUnload()"> <!-- メモリリークを防ぐため。必ず指定する -->

<h2>Googleマップの使用例</h2>
<p>
クリック地点の経緯度を表示します。
</p>
<form>
  <!-- 初期値は東京タワーの経緯度 -->
  緯度: <input type="text" value="35.65839462977403"  id="click_lat">&nbsp;
  経度: <input type="text" value="139.745374917984" id="click_long">
</form>

<!-- 地図を表示する領域の指定 -->
<div id="map" style="width: 640px; height: 480px;">
</div>

<script type="text/javascript">
  //<![CDATA[ 
    if (GBrowserIsCompatible()) { // Googleマップが利用できるブラウザかチェック
      var map = new GMap2(document.getElementById("map"));
      // GMap2という地図を表すオブジェクトのインスタンスを生成。
      // 表示する要素のオブジェクトを引数として渡す。idに"map"をもつ要素の中に表示される
      // （上のdivに指定してある）
      map.setCenter(new GLatLng(document.getElementById('click_lat').value, 
                              document.getElementById('click_long').value), 15);
      // GMap2オブジェクトのメソッドsetCenterを呼び出す。
      // click_lat（緯度）とclick_long（経度）というidをもつtext領域に指定された
      // 緯度と経度を中心に、15というスケールで地図を表示。

      // setCenterの引数には経緯度を表すオブジェクトGLatLngのインスタンスを指定する。
      // GLatLngは経緯度を表すオブジェクト
      // 渡されるGLatLngのインスタンスは経度と緯度を指定して生成する。

      map.addControl(new GLargeMapControl()); // コントロールを追加。移動用
      map.addControl(new GMapTypeControl()); // 地図の種類用
 
      // mapにイベントリスナーを追加。クリックされると関数が実行される
      GEvent.addListener(map, 'click',
        function(overlay, point) {
          if (point) {
            // text領域にクリックされた経緯度を書き出す。
            document.getElementById('click_lat').value = point.y;
            document.getElementById('click_long').value = point.x;
          }
        }
      );
    }
 
     //]]>
  </script>

</body>
</html>
