GoogleMapAPI、自宅から駅までの距離を測定

GoogleMapを使用して２点間の距離を測定

○GoogleMapを使用して２点間の距離を測定

アプリケーションイメージ

スタート地点、ゴール地点を指定して、２点間の距離を測定するアプリイメージ画面です。

順に、
○１番目：起動後の画面
○２番目：スタート地点、ゴール地点を指定後の画面
スタート地点(青)、ゴール地点(緑)のマーカが表示される
○３番目：距離測定を指定後の画面
infoウィンドウに「住所」「緯度経度」「距離」が表示される

今回作成したアプリの仕様

○機能仕様

スタート、ゴールを地図上で指定して、その間の距離を地図上に表示します。

○入力仕様

  ①スタート地点の指定：地図上をクリックして、スタート地点を指定する。
  ②ゴール地点の指定：まず「ゴール地点」ボタンを押下する
  ③次に、ゴール地点の指定：地図上をクリックして、ゴール地点を指定する。
  ④最後に、「距離測定」ボタンを押下する。

○出力仕様

①スタート地点が指定されたら、青色のマーカを表示する、タイトルは「スタート地点」。
またスタート地点の「緯度経度」を表示する。

②ゴール地点が指定されたら、青色のマーカを表示する、タイトルは「スタート地点」。
またゴール地点の「緯度経度」を表示する。

  ③「ゴール地点」ボタンが押下されたら、内部モードを「ゴール地点モード」に設定する。
  ④距離測定ボタンが押下されたら、以下の情報を表示する。
    ○ストート地点、ゴール地点の住所を表示する。
    ○ストート地点、ゴール地点の距離を計算する。
    ○距離情報を表示する。
    ○ストート地点、ゴール地点のinfoウィンドウを表示(住所/緯度経度)。
    ○ストート地点、ゴール地点を直線でつなぐ(大園[青線]、メルカトル[赤線])。

他サイトでの実装方法

参考までに、他のサイトでの距離測定アプリの結果を記載します。
私の自宅から駅までの距離は、以下でした：
    今回アプリの結果：　779m
    G社アプリの結果：　 755m
    C社アプリの結果：　702m

○G社アプリ(左図)：GoogleMap：https://www.google.co.jp/maps/@35.3626947,139.5789324,15z　地図上で右クリックして「距離を計算」を選択する、あとは経路を順次クリックするだけ。

○C社アプリ(右図)：地図をなぞって距離を計算：https://keisan.casio.jp/keisan/googleMap.php?km=&m=map&lang=&is_pc=1　地図上で、経路を順次クリックするだけ。

おまけ、少々専門的な話、地球は丸かった！

【青い線】最短距離　（大圏コース）
地球の大圏上に沿った、船や航空機の航路。二地点間の最短距離となる。大圏コース。

【赤い線】普通のPolyline（メルカトル図法上での最短距離）

少々専門的な話となりますが、大圏コース(最短距離)とメルカトル図法上での最短距離について：
参考URL：大圏コース（たいけんコース、Great circle route）とは

実はこのアプリでは、「大圏コース」は青い線で、「メルカトル図法上での最短距離」は赤い線で表示しています。

日本国内では、この効果は地図上では重なって表示されないので、「東京」から「パキスタン」までの距離を測定して、効果を調べました。

東京からパキスタンまでの距離を測定：
今回のアプリ： 6,445Km
Google地図： 6,493Km

アプリのソースコード

◯geometryライブラリ使用宣言

◯マーカー表示：marker(title, latlng, color) マーカーはスタート地点/ゴール地点を区別しやすいように、各々青色/緑色とした。

//マーカを表示する
function marker(title, latlng, color) {
//	alert("color="+color);
	if ( color == "blue" ) {
		var icon = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png";
	} else {
		var icon = "http://maps.google.com/mapfiles/ms/icons/green-dot.png";
	}
	var gmarker = new google.maps.Marker({
		position: latlng,       // 緯度・経度は地図の中心
		icon: icon,
		title: title     // ツールチップ
	});
	// マーカーを地図の中心に表示
    gmarker.setMap(map);
}

◯２点間の距離測定：distance() 「google.maps.geometry.spherical.computeDistanceBetween」関数を使用した


//スタート地点からゴールまでの距離を測定
function distance() {
	// 距離
	var distance = google.maps.geometry.spherical.computeDistanceBetween(START, GOAL);
	document.getElementById('distance').value = distance;

	// 吹き出しに表示
	//スタート地点
	getAddress(START, "");
	//ゴール地点
	getAddress(GOAL, distance);

	// 最短距離　（大圏コース）
	new google.maps.Polyline({
		geodesic: true,
		path: [START, GOAL],
		map: map,
		strokeColor: 'blue'
	});

	// 普通のPolyline（メルカトル図法上での最短距離）
	new google.maps.Polyline({
		path: [START, GOAL],
		map: map,
		strokeColor: 'red'
	});
//});
}

◯緯度経度から住所を取得する：getAddress(latlng, distance)

//緯度経度から住所を取得する
function getAddress(latlng, distance) {

  // ジオコーダのコンストラクタ
  var geocoder = new google.maps.Geocoder();

  // geocodeリクエストを実行。
  // 第１引数はGeocoderRequest。緯度経度⇒住所の変換時はlatLngプロパティを入れればOK。
  // 第２引数はコールバック関数。
  geocoder.geocode({
    latLng: latlng
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      // results.length > 1 で返ってくる場合もありますが・・・。
      if (results[0].geometry) {
          // 住所を取得(日本の場合だけ「日本, 」を削除)
        var address = results[0].formatted_address.replace(/^日本、/, '');
		if ( distance != "" ) {
          new google.maps.InfoWindow({
            content: "測定距離: " + distance+ " m
" + address + "
(Lat, Lng) = " + latlng,
            position: latlng,
            map: map
          });
		  document.getElementById('address1').value = address;
		} else {
          new google.maps.InfoWindow({
            content: address + "
(Lat, Lng) = " + latlng,
            position: latlng,
            map: map
          });
		  document.getElementById('address2').value = address;
		}

        }
	★以下省略する★

◯全ソースを記載します。









・スタート地点を指定するには「スタート地点」ボタンを押下してから、地図上でクリックして下さい

・ゴール地点を指定するには「ゴール地点」ボタンを押下してから、地図上でクリックして下さい


緯度：
経度：
住所：




緯度：
経度：
住所：





m

利用料金について

詳細は、以下のURLを参照：
https://cloud.google.com/maps-platform/pricing/sheet?hl=ja

料金について、一部抜粋します：

従量課金制で、使用分に対してのみ料金が発生します。毎月 $200 分は無料でご利用いただけます（その月の使用分から $200 を差し引いた金額がお客様の請求先アカウントに課金されます）。また、費用が予想外に増加するのを防ぐため、使用量の上限を設定することもできます。現在の API の使用量については、Google Cloud Platform Consoleでご確認いただけます。毎月のお支払いの見積もりについては、料金と使用量の一覧をご利用ください。詳しい料金情報については、Google Maps Platformの課金をご覧ください。

◯現在の API の使用量：Google Cloud Platform Console
    https://console.cloud.google.com/google/maps-apis/overview?hl=ja&project=exec-api&folder=&organizationId=
◯料金と使用量の一覧：
    https://cloud.google.com/maps-platform/pricing?hl=ja#matrix
◯詳しい料金情報：Google Maps Platform
    https://developers.google.com/maps/billing/gmp-billing?hl=ja&_ga=2.259070794.1333406052.1614127372-60283103.1613794066

料金実績について

2020年9月&10月の実績値を示す。
料金について：
大雑把に言うと、10000回呼出しで、200ドル(無料の範囲)近く使うと思われます。
※無料の範囲で、330回/1日、API呼出が可能、100人/1日までは無料の範囲と想定されます。
※これは単なる目安の数字です、根拠はありません。()内は呼出回数

呼出すAPIの種類	9月	10月	1回の料金
Maps API Dynamic Maps	￥221(298)	￥256(346)	0.74円
Places API Places – Nearby Search	￥180(53)	￥101(30)	3.38円
Geocoding API Geocoding	–	￥43(81)	0.53円
Places API Atmosphere Data	￥32(61)	￥20(38)	0.52円
Places API Find Place	￥36(20)	￥16(9)	1.80円
Places API Places Detailsace	￥14(8)	￥14(8)	1.75円
Directions API Directions	–	￥3(5)	0.60円
Places API Contact Data	￥19(59)	–	0.32円

9月は￥462円、10月は￥502円の請求、もちろん$200ドル以内なので、実際の請求金額は、0円です。
例えば、

「「Nearby Search」検索等」のアプリでは、4.1円/1回でした。
「FindPlac&Details」のアプリでは、4.3円/1回でした。

APIキーの隠蔽について

GoogleMapAPIは、有料なのでAPIキーが漏れないようにすることが、大事です。
勿論、コンソールでの上限設定等は、必須ですが、キーの隠蔽も重要だと思います。
APIキーの隠蔽方法について、検討しました。

CGI(PHP)を使用して、APIキーを見えないようにします
  windows.onloadイベントで非同期にGoogleMapsAPIをロードする
  なお、キー自身は、環境変数に事前に設定する(httpd.confに記述)
  GoogleMapAPIのロード処理は、共通関数で実施する(/mapapi.php)

○APIキーはapacheの設定ファイル(httpd.conf)で、環境変数として定義した：
#環境変数の設定：APIKEY
SetEnv GOOGLE_MAPS_API_KEY AIzaSyBQEpcpiaKeqI……….
○メインのmap.phpから,mapapi.jsをincludeする
○mapapi.jsは「onload」時に、apikey.phpを起動する
○apikey.phpにて、APIキーを環境変数から取得する
○apikey.phpは、MapsAPIのURLにキーを追加してMapsAPIをロード

著者：志村佳昭（株式会社トリニタス　技術顧問）

BLOG