MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2017.07.09

Geocoding API を使って郵便番号から住所を入力するフォーム

郵便番号から住所入力

みなさん、こんにちは。

よく入力フォームで住所を入力するとき、郵便番号から自動で住所を入力する方法がありますね。今回は、Google Maps Geocoding API を使用してその方法を実現したいと思います。

 

早速、サンプルのプログラムを作成したので、操作してみてください。7桁の郵便番号を入力し、住所取得ボタンをクリックすると、都道府県、市区町村、住所欄に取得したデータが入力されます。

 

コーディング方法は、下記のとおりです。注意点として、ジオコードの結果に「address_components」という配列のデータがあります。この配列が住所によって、5個か6個になりますので、数に合わせて出力方法を変更しています。

$.ajax({
	url: 'https://maps.googleapis.com/maps/api/geocode/json',
	type: 'GET',
	dataType: 'json',
	data: {
		key: {API_KEY},
		address: $('#postal').val(),
		language: 'ja'
	}
}).done(function(data) {
	if (data.status == "OK") {
		var components = data.results[0].address_components;
		if (components.length == 5) {
			$('#pref').val(components[3].long_name);
			$('#city').val(components[2].long_name);
			$('#addr').val(components[1].long_name);
		} else if (components.length == 6) {
			$('#pref').val(components[4].long_name);
			$('#city').val(components[3].long_name + components[2].long_name);
			$('#addr').val(components[1].long_name);
		}
	}
});

 

更に拡張し、Places API オートコンプリートの機能を追加しました。郵便番号を入力していくと、候補が表示されるようになります!

 

テキストボックスにオートコンプリートを設定します。

var initAutocomplete = function() {
	// 対応させるテキストボックス
    var input = document.getElementById('postal');
    var options = {
		types: ['(regions)'],	// 検索タイプ
		componentRestrictions: {country: 'jp'}	// これで日本国内の住所しか表示されなくなる
    };
    var autocomplete = new google.maps.places.Autocomplete(input, options);
};

先程と「address_components」の配列の順番が違いますので、ご注意ください。

$.ajax({
	url: 'https://maps.googleapis.com/maps/api/geocode/json',
	type: 'GET',
	dataType: 'json',
	data: {
		key: {API_KEY},
		address: $('#postal').val(),
		language: 'ja'
	}
}).done(function(data) {
	if (data.status == "OK") {
		var components = data.results[0].address_components;
		if (components.length == 5) {
			$('#postal').val(components[4].long_name);
			$('#pref').val(components[2].long_name);
			$('#city').val(components[1].long_name);
			$('#addr').val(components[0].long_name);
		} else if (components.length == 6) {
			$('#postal').val(components[5].long_name);
			$('#pref').val(components[3].long_name);
			$('#city').val(components[2].long_name + components[1].long_name);
			$('#addr').val(components[0].long_name);
		}
	}
});

 

いかがでしたか?

Google Maps API を活用すると、簡単に住所入力の補完ができますね。是非、みなさもご活用ください。

 

マルティスープでは、Google Maps API に関する質問、あるいは Google Map 以外の地図に関する開発のご相談も承っています。是非、下記の問い合わせフォームよりお送りください。

 

 

【関連記事】こんな記事も読まれています

2019.05.19

Maps JavaScript API の新機能・表示範囲制限

みなさん、こんにちは。

5月14日頃、Maps JavaScript API はのバージョンが「3.36」に更新されました。今回は、3.36で・・・

続きを読む

2016.09.20

Google Maps と 360°パノラマ画像の連携

みなさん、こんにちは。

 

Googleマップにあるストリートビューの機能ですが、カスタマイズすれば自分が撮影したパノラ・・・

続きを読む

2017.05.01

Google Places API オートコンプリートで地名検索を素早くする

みんさん、こんちには。

今回は、Google Places API のオートコンプリートについて、ご紹介します。

オートコ・・・

続きを読む

 - Google Maps APIs, Google Maps Geocoding API, Google Places API, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)