JavaScriptで「GoogleマップAPI」を利用する

Google Maps Javascript API を利用すると、JavaScriptを使ってGoogleマップを操作することができる。

プログラムを実行する

ダウンロード

  20: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  21: <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.3&amp;sensor=false"></script>
  22: <script type="text/javascript">
  23: <!--
  24: // 初期化
  25: google.maps.event.addDomListener(window, 'load', function() {
  26:     var refere = 'http://www.pahoo.org/e-soul/webtech/js01/js01-05-01.shtm';
  27:     $('#title').html('Googleマップを利用する  <span style="font-size:small;">' + yyyymmdd() + '版</span>');
  28:     $('#refere').html('参考サイト：<a href="' + refere +'">' + refere + '</a>');
  29: 
  30:     //初期値
  31:     var latitude  = 35.675;     //緯度
  32:     var longitude = 139.78;     //経度
  33:     var type = 'ROADMAP';           //マップタイプ
  34:     var zoom = 8;                   //拡大率
  35:     var mapdiv = document.getElementById('gmap');
  36:     var myOptions = {
  37:         zoom: zoom,
  38:         center: new google.maps.LatLng(latitude, longitude),
  39:         mapTypeId: google.maps.MapTypeId.type,
  40:         mapTypeControl: true,
  41:         scaleControl: true
  42:     };
  43: 
  44:     //Googleマップ・オブジェクト
  45:     var map = new google.maps.Map(mapdiv, myOptions);
  46: 
  47:     //イベント・リスナ
  48:     google.maps.event.addListener(map, 'bounds_changed', function() {
  49:         getPointData();
  50:     });
  51:     google.maps.event.addListener(map, 'maptypeid_changed', function() {
  52:         getPointData();
  53:     });
  54: 
  55:     //座標・ズームの変化を取得
  56:     function getPointData() {
  57:         point = map.getCenter();
  58:         document.getElementById("latitude").value  = point.lat();
  59:         document.getElementById("longitude").value = point.lng();
  60:         document.getElementById("zoom").value  = map.getZoom();
  61:         document.getElementById("type").value  = map.getMapTypeId().toUpperCase();
  62:         wgs84_tokyo();
  63:     }
  64: 
  65:     //世界測地系を日本測地系に変換
  66:     function wgs84_tokyo() {
  67:         var lat = document.getElementById("latitude").value * 1.0;
  68:         var lng = document.getElementById("longitude").value * 1.0;
  69:         var lat_t = lat + lat * 0.00010696  - lng * 0.000017467 - 0.0046020;
  70:         var lng_t = lng + lat * 0.000046047 + lng * 0.000083049 - 0.010041;
  71:         document.getElementById("lat_tokyo").value = lat_t;
  72:         document.getElementById("lng_tokyo").value = lng_t;
  73:     }
  74: 
  75:     //ファイル更新年月日取得
  76:     //@return   string 年月日
  77:     function yyyymmdd() {
  78:         var fdate = new Date(document.lastModified);
  79:         return fdate.getFullYear() + '/' + (fdate.getMonth() + 1) + '/' + fdate.getDate();
  80:     }
  81: });
  82: -->
  83: </script>

Google Maps Javascript API を利用するには、事前に "https://maps.google.com/maps/api/js" をロードしておく。ここではv3.3をロードする。
jQuery はタイトル表示などのために利用しているだけで、GoogleマップAPIを利用するためには必須ではない。

Google Maps Javascript API を呼び出す手続きは、addDomListener を使ってHTMLペーロード時に実行するようにしておく。

Googleマップ・オブジェクトを生成するには、google.maps.Map メソッドを利用する。
ここでは、Googleマップを移動すると、リアルタイムに座標（世界測地系・日本測地系）を計算するために、addListener メソッドを使って、イベント・リスナを追加している。
世界測地系を日本測地系に変換するユーザー関数 wgs84_tokyo については、「PHPの関数で複数の値を戻す」を参照されたい。

• Google Maps Javascript API
• jQuery：公式サイト
• jQuery 日本語リファレンス
• PHPの関数で複数の値を戻す：ぱふぅ家のホームページ