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 以外の地図に関する開発のご相談も承っています。是非、下記の問い合わせフォームよりお送りください。

 

 

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

2017.09.10

Googleマップに天気画像を重ねて表示してみる

みなさん、こんにちは。

今回は Googleマップ上に、「OpenWeatherMap」という天気情報サービスで公開している降水量、温度などの・・・

続きを読む

2017.02.01

Embed API で会社のアクセスマップを作成する

こんにちは。

会社のホームページにアクセスマップを作成することがありますが、みなさんどのように作成していますか?

昔はFLASHや・・・

続きを読む

2017.04.08

Googleマップで見る「ブラタモリマップ」を作成してみました

みなさん、こんにちは。

国民的人気番組「ブラタモリ」でタモリさんが訪れた街を Google マップ上で表示する「ブラタモリマップ」を作成し・・・

続きを読む

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

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

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