入力された施設名や住所から経度緯度を取得し、グーグルマップにマーカーを立てる

2015年03月08日

カテゴリー：: javascript

先日、電車の座席に座っていた時、乗ってきたおばあさんに席を譲ろうとしたところ、かたくなに拒否され恥をかいたという話はどうでもいいんですが、久々の更新になります。

今回は、グーグルマップのAPIを使い施設名や住所から経度緯度を取得し、グーグルマップにマーカーを立てる手法をご紹介いたします。

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

1	<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

まず、グーグルマップのAPIを読み込みます。
本来はAPIキーを指定しないといけないんですが、指定しなくても一応は動きます。

次にHTMLの記述です。

<div id="search_form">
	<input id="geo_search_text" type="text" name="text" size="40" value="" />
	<input onclick="geo_search_map();" type="button" name="button" value="検索" />
</div>
<div id="map" style="width: 500px; height: 500px;"></div>

</div>

ID:search_formで囲っているのが、施設名や住所を入力するためのテキストフィールドと検索をする際に押す検索ボタンです。
ID:mapはグーグルマップを表示するためのボックスです。

最後にjavascriptの記述です。

<script type="text/javascript">
var map = false;
var marker = false;
var gc = new google.maps.Geocoder();
var address_str = "東京"; // 初期表示位置

window.onload = function() {
	map = new google.maps.Map(
				document.getElementById("map"),{
					zoom : 15,
					center : new google.maps.LatLng(0,0),
					mapTypeId : google.maps.MapTypeId.ROADMAP
				}
			);

	// ジオコーディング
	gc.geocode({ address : address_str }, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			map.setCenter(results[0].geometry.location);

			var pos = map.getCenter();
			var lat = pos.lat();
			var lng = pos.lng();

			// マーカーを立てる
			marker = new google.maps.Marker({
				position: new google.maps.LatLng(lat, lng),
				map: map
			});

		} else {
			alert("情報の取得に失敗しました");
		}
	});
}

function geo_search_map() {
	address_str = document.getElementById("geo_search_text").value;
	gc.geocode({ address : address_str }, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			map.setCenter(results[0].geometry.location);

			var pos = map.getCenter();
			var lat = pos.lat();
			var lng = pos.lng();

			marker.setPosition(new google.maps.LatLng(lat, lng));

		} else {
			alert("情報の取得に失敗しました");
		}
	});
}
</script>

var map = false;

var marker = false;

var gc = new google.maps.Geocoder();

var address_str = "東京"; // 初期表示位置

window.onload = function() {

map = new google.maps.Map(

document.getElementById("map"),{

zoom : 15,

center : new google.maps.LatLng(0,0),

mapTypeId : google.maps.MapTypeId.ROADMAP

}

);

// ジオコーディング

gc.geocode({ address : address_str }, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

map.setCenter(results[0].geometry.location);

var pos = map.getCenter();

var lat = pos.lat();

var lng = pos.lng();

// マーカーを立てる

marker = new google.maps.Marker({

position: new google.maps.LatLng(lat, lng),

map: map

});

} else {

alert("情報の取得に失敗しました");

}

});

}

function geo_search_map() {

address_str = document.getElementById("geo_search_text").value;

gc.geocode({ address : address_str }, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

map.setCenter(results[0].geometry.location);

var pos = map.getCenter();

var lat = pos.lat();

var lng = pos.lng();

marker.setPosition(new google.maps.LatLng(lat, lng));

} else {

alert("情報の取得に失敗しました");

}

});

}

</script>

window.onloadでページのロードが完了した際に、地図の初期化を実行しています。

「map = new google.maps.Map～略～」でID:mapに地図を表示します。
「gc.geocode({ address : address_str }, function(results, status) {～略～」では、変数「address_str」に代入されている文字を元に経度緯度情報を取得しています。
「map.setCenter(results[0].geometry.location);」では、取得した経度緯度情報が地図の中心になるように移動させています。
「marker = new google.maps.Marker({～略～」で地図にマーカーをセットしています。マーカーの座標は、地図の中心座標（取得した経度緯度情報）です。

geo_search_map()は、検索ボタンが押された際に実行される関数ですが、処理の内容はテキストフィールドから文字を取得する以外は、上記で説明したものと同じ内容になっています。

サンプルはこちら