サンプル・プログラム
プログラムの解説:GoogleマップAPI
0020: <script type="text/javascript" src="https://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&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>
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の関数で複数の値を戻す:ぱふぅ家のホームページ