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

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

サンプル・プログラム

プログラムの解説:GoogleマップAPI

0020: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
0021: <script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3.3&amp;sensor=false"></script>
0022: <script type="text/javascript">
0023: <!--
0024: // 初期化
0025: google.maps.event.addDomListener(window, 'load', function() {
0026:     var refere = 'https://www.pahoo.org/e-soul/webtech/js01/js01-05-01.shtm';
0027:     $('#title').html('Googleマップを利用する  <span style="font-size:small;">' + yyyymmdd() + '版</span>');
0028:     $('#refere').html('参考サイト:<a href="' + refere +'">' + refere + '</a>');
0029: 
0030:     //初期値
0031:     var latitude  = 35.675;       //緯度
0032:     var longitude = 139.78;        //経度
0033:     var type = 'ROADMAP';            //マップタイプ
0034:     var zoom = 8;                    //拡大率
0035:     var mapdiv = document.getElementById('gmap');
0036:     var myOptions = {
0037:         zoom: zoom,
0038:         center: new google.maps.LatLng(latitude, longitude),
0039:         mapTypeId: google.maps.MapTypeId.type,
0040:         mapTypeControl: true,
0041:         scaleControl: true
0042:     };
0043: 
0044:     //Googleマップ・オブジェクト
0045:     var map = new google.maps.Map(mapdiv, myOptions);
0046: 
0047:     //イベント・リスナ
0048:     google.maps.event.addListener(map, 'bounds_changed', function() {
0049:         getPointData();
0050:     });
0051:     google.maps.event.addListener(map, 'maptypeid_changed', function() {
0052:         getPointData();
0053:     });
0054: 
0055:     //座標・ズームの変化を取得
0056:     function getPointData() {
0057:         point = map.getCenter();
0058:         document.getElementById("latitude").value  = point.lat();
0059:         document.getElementById("longitude").value = point.lng();
0060:         document.getElementById("zoom").value  = map.getZoom();
0061:         document.getElementById("type").value  = map.getMapTypeId().toUpperCase();
0062:         wgs84_tokyo();
0063:     }
0064: 
0065:     //世界測地系を日本測地系に変換
0066:     function wgs84_tokyo() {
0067:         var lat = document.getElementById("latitude").value * 1.0;
0068:         var lng = document.getElementById("longitude").value * 1.0;
0069:         var lat_t = lat + lat * 0.00010696  - lng * 0.000017467 - 0.0046020;
0070:         var lng_t = lng + lat * 0.000046047 + lng * 0.000083049 - 0.010041;
0071:         document.getElementById("lat_tokyo").value = lat_t;
0072:         document.getElementById("lng_tokyo").value = lng_t;
0073:     }
0074: 
0075:     //ファイル更新年月日取得
0076:     //@return  string 年月日
0077:     function yyyymmdd() {
0078:         var fdate = new Date(document.lastModified);
0079:         return fdate.getFullYear() + '/' + (fdate.getMonth() + 1) + '/' + fdate.getDate();
0080:     }
0081: });
0082: -->
0083: </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 の関数で複数の値を戻す」を参照されたい。

参考サイト

(この項おわり)
header