ジオコーディングとは
ジオコーディングとは
- 住所テキストから座標を取得
- 座標から住所テキストを取得（リバースジオコーディング）
といった処理を行うことです。
ジオコーディングのサンプル
以下のサンプル geocoding.php を作成しておきましょう。
geocoding.php
<?php
define('API_KEY', getenv('API_KEY'));
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#map_box {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<p>
<label>住所を検索: <input type="text" id="address"></label>
<button id="search">検索</button>
</p>
<p id="search_result"></p>
<div id="map_box"></div>
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "<?php echo API_KEY; ?>",
});
</script>
<script>
let map;
// async は非同期で実行される関数
async function initMap() {
// await は非同期処理が終わるまで待つ
// Map は Google Maps のクラス
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
let shinagawa = {
lat: 35.6284477,
lng: 139.7366322
};
// 表示領域の確保
let map_box = document.getElementById('map_box');
// Google Maps のマップオブジェクトを生成
map = new Map(
map_box, // 第１引数はマップ表示対象の要素。
{
// 第２引数で各種オプションを設定
center: shinagawa, // 地図の中心を品川に
zoom: 15, // 拡大のレベルを15に。（1 - 18くらい）
disableDefaultUI: true, // 各種UIをOFFに
zoomControl: true, // 拡大縮小だけできるように
clickableIcons: false, // クリック関連の機能をoffに。
mapId: 'DEMO_MAP_ID', // マップのIDを指定
}
);
}
initMap();
</script>
</body>
</html>
検索フォームと品川駅を中心としたマップが表示されていればOKです。
ジオコーディングによる住所検索
では、ジオコーディングを利用してみましょう。
initMap 関数内に以下の記述を行います。
// ジオコーダーの生成
let geocoder = new google.maps.Geocoder();
document.getElementById('search')
.addEventListener(
'click',
function(){
geocoder.geocode(
// 第一引数にジオコーディングのオプションを設定
{
address: document.getElementById('address').value
},
// 第二引数に結果取得時の動作を設定
function(results, status){
// 失敗時の処理
if(status !== 'OK'){
alert('ジオコーディングに失敗しました。結果: ' + status);
return;
}
// 成功した場合、resultsの0番目に結果が取得される。
if(!results[0]){
alert('結果が取得できませんでした');
return;
}
// マップの中心を移動
map.panTo(results[0].geometry.location);
document.getElementById('search_result').innerHTML = results[0].formatted_address;
}
);
}
);
検索窓に住所を入力し、検索ボタンをクリックすると該当の住所の地図が表示されるようになります。
map.panTo(results[0].geometry.location);
panTo は指定の位置にマップの中心をスクロールするメソッドです。 ジオコーディングで取得した座標にマップをスクロールさせています。
リバースジオコーディングによる住所の取得
続いて、クリック時にリバースジオコーディングで住所を取得して表示させてみましょう。
// クリック位置をリバースジオコーディング
map.addListener('click', function(e){
geocoder.geocode({
location: e.latLng
}, function(results, status){
if(status !== 'OK'){
alert('リバースジオコーディングに失敗しました。結果: ' + status);
return;
}
// console.log(results);
if(!results[0]){
alert('結果が取得できませんでした。');
return;
}
// クリックした位置にマーカーを立てる
let added_marker = new AdvancedMarkerElement({
position: e.latLng, // クリックした箇所
map: map,
});
// マーカーに情報ウィンドウを紐付け、
// リバースジオコーディングで取得した住所を表示する。
let infoWindow = new google.maps.InfoWindow({
content: results[0].formatted_address,
});
infoWindow.open(map, added_marker);
})
});
これで、クリックした位置のマーカーに紐付けた情報ウィンドウに、取得した住所の情報が表示されます。
前節で学んだマップへのイベント設定が活用されているところに注目しておきましょう。