<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>例14-4 GoogleマップのAPIの使用例</title>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
  //<![CDATA[
  function initialize() {
    var latlng = new google.maps.LatLng(35.65839462977403, 139.745374917984); // 経緯度を表すオブジェクト。東京タワーの経緯度を指定
    var myOptions = {
      zoom: 15, // ズームのレベル
      center: latlng, // 経緯度。上で生成
      mapTypeId: google.maps.MapTypeId.ROADMAP // 地図のタイプ
    };


      var map =
	new google.maps.Map(document.getElementById("map"), myOptions);
      // google.maps.Mapという地図を表すオブジェクトのインスタンスを生成。
      // 表示する要素のオブジェクトとオプションを引数として渡す。
      // idに"map"をもつ要素の中に表示される
      // （上のdivに指定してある）

      // mapにイベントリスナーを追加。クリックされると関数が実行される
      google.maps.event.addListener(map, 'click',
        function(event) {
          if (event) {
            // text領域にクリックされた経緯度を書き出す。
            document.getElementById('click_lat').value
	      = event.latLng.lat();
            document.getElementById('click_long').value
	      = event.latLng.lng();
          }
        }
      );
  }
 
     //]]>
  </script>

</head>

<body onload="initialize();">

<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>

</body>
</html>
