techa1008

ROCKET NOTE

2018.07.19

GoogleのMaps JavaScript APIを使って緯度経度から住所を取得する

GPSが有効になっているスマートフォンからは緯度経度情報を取得することができ、Googleが提供するGeocoding APIを使えば、そこから住所を取得することができます。

まずはGoogle Cloud Platformで新しいプロジェクトを作成して、APIキーを取得します。

プロジェクト選択から「新しいプロジェクト」を選択し、任意のプロジェクト名をつけて「作成」します。

通知の箇所がぐるぐるし終わると、プロジェクトが作成されたという通知が追加されます。

通知を選択してホームに移動したら、「APIの概要に移動」を選択し、「APIとサービスの有効化」を選択します。

検索窓から「map」で検索して表示される「Maps JavaScript API」を選択し、有効化します。

「認証情報」タブを選択し、「認証情報を作成」から「APIキー」を選択します。

作成されたAPIキーをコピーしておき、続いて「キーを制限」を選択します。

たとえばリファラでこのAPIキーを使用できるサイトやページを指定して「保存」します。

左メニューからホームに戻り、同様に「Geocoding API」も検索して有効化すれば準備完了です。

サンプルHTMLです。

SELECT ALL

<div id="result"><!-- ここに結果を表示する --></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=取得したAPIキー"></script>
<script>

// Geolocation APIに対応しているブラウザ
if (navigator.geolocation){

	// 位置を取得する
	navigator.geolocation.getCurrentPosition(successFunc, errorFunc) ;

} else {
	alert('非対応ブラウザ');
}

// 位置取得成功時の処理
function successFunc(position){

	// 緯度経度を取得
	var latlng = {lat: parseFloat(position.coords.latitude), lng: parseFloat(position.coords.longitude)};

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

	// Reverse Geocoding開始
	geocoder.geocode({

		// 緯度経度を指定
		latLng: latlng

	}, function(results, status){

		// 成功
		if (status == google.maps.GeocoderStatus.OK && results[0].geometry) {

			// 住所フル
			var address = results[0].formatted_address;

			// 住所のコンポーネントを取得
			var address_comp = results[0].address_components;

			// 都道府県
			var pref = address_comp[address_comp.length - 3].short_name;

			// 市を取得
			var city = address_comp[address_comp.length - 4].short_name;

			// 区を取得
			var ward = address_comp[address_comp.length - 5].short_name;

			// 結果を出力
			document.getElementById('result').innerHTML = address + '<br>' + pref + '<br>' + city + '<br>' + ward;

		}

	});

}

// 位置取得失敗時の処理
function errorFunc(position){
	alert('失敗');
}

</script>

APIの利用料金はこちらを参照。