はじめに
先日Railsで制作したポートフォリオにGoogle Maps APIを取り入れて地図表示機能を実装したのですが、
そこで書いたJavaScriptのコードの理解が曖昧だったので、記事にまとめてみました。
この記事ではGoogle Maps APIの導入方法ではなく、JavaScriptのコードにフォーカスして解説します。
APIの導入の仕方についてはこちらの記事では解説しませんので、知りたい方は以下の記事をご覧ください。
【Rails6 / Google Map API】初学者向け！Ruby on Railsで簡単にGoogle Map APIの導入する
「ネットにある記事をコピペしたら何となくできたけどコードの内容が理解できない」
という方がいましたら読んでいただければと思います。
前提知識
住所や地名を緯度や経度などの地理座標に変換することを「ジオコーディング」と言います。
Google MapsのGeocoding APIは、ジオコーディングをするAPIです。
完成イメージ
先日旅行をしたい人がツアーガイドを募集できるアプリを制作し、
旅行したい場所として入力した場所が地図に表示されるように実装しました。
この記事では、このアプリのイメージのもとで解説します。
ソースコード
ビューのソースコードは以下のとおりで、
旅行したい場所を表示する箇所にaddressのidを、地図を表示する場所にmapのidを付与しています。
.Post_main__Box
.Post_show_title
= @post.title
.Post_table.Text
%table
%tr
%th 旅行したい場所
-# ここに住所を表示
%td#address
= @post.region
%tr
%th 希望日時
%td
= @post.datetime
%tr
%th 希望料金
%td
= @post.charge
%tr
%th お支払い方法
%td
= @post.payment
.Post_head
= "-リクエスト内容-"
.Post_content
= simple_format(@post.content)
.Post_head
= "-地図-"
-# ここに地図を表示
.Post_map#map
さらに、JavaScriptのソースコードは以下のとおりです。
// HTMLの読み込みが終わった後に処理が行われるように設定
document.addEventListener('DOMContentLoaded', () => {
const inputAddress = document.getElementById('address').textContent; //①
const target = document.getElementById('map'); //②
geocoder = new google.maps.Geocoder(); // ③
geocoder.geocode( { address: inputAddress}, (results, status) => { // ④
if (status == 'OK') { // ⑤
const map = new google.maps.Map(target, { // ⑥
center: results[0].geometry.location, // ⑦
zoom: 13 // ⑧
});
new google.maps.Marker({ // ⑨
map: map, // ⑩
position: results[0].geometry.location // ⑪
});
} else { // ⑫
document.getElementById('map').style.height = '20px' // ⑬
document.getElementById('map').innerHTML = '該当する場所が見つかりませんでした。' // ⑭
}
});
})
解説
上記のJavaScriptのコードについて解説していきます。
▼①と②について
const inputAddress = document.getElementById('address').textContent; //①
const target = document.getElementById('map'); //②
①ではaddressのidを持った要素の中にある文字列（ここでは住所）を取得し、inputAddressに代入しています。
②ではmapのidを持った地図を表示する領域のdiv要素のオブジェクトをtargetに代入しています。
▼③について
geocoder = new google.maps.Geocoder();
この記述では、Googleサーバーと通信するために必要なgoogle.maps.Geocoderのオブジェクト（インスタンス）を生成しています。
APIには、このオブジェクトを通してアクセスします。
▼④について
geocoder.geocode( { address: inputAddress}, (results, status) => {
ここではまず、①で生成したgeocoderオブジェクトにgeocode()メソッドを用いることで,
ジオコーディングをするためのリクエストを送信しています。
リクエストを送信するときは、APIの仕様でaddressかlocationかplaceIdのどれかの値を渡さなくてはならず、
上記のコードではaddressのプロパティに①で定義したinputAddressの値を入れてパラメーターとして渡しています。
リクエストが完了すると結果（results）とステータス（status）が返ってくるので、
それらを取得して処理するために、resultsとstatusを引数にコールバック関数を記述します。
▼⑤について
if (status == 'OK')
リクエストの結果として返されるステータスでは、ジオコーディングが成功した場合にはOKが返され、
成功しなかった場合にはERRORなどといったコードが返されます。
上記の記述では、ジオコーディングが成功した場合のことを表しています。
▼⑥〜⑧について
const map = new google.maps.Map(target, { // ⑥
center: results[0].geometry.location, // ⑦
zoom: 13 // ⑧
});
⑥では、new google.maps.Mapで地図を生成し、mapに代入しています。
google.maps.Mapクラスのコンストラクタでは、1番目の引数には地図を表示するdiv要素を指定します。
ここでは、②で定義したtargetを指定しています。
また、2番目の引数には、地図の座標やズームレベルを設定するオブジェクトを指定します。
⑦では、results[0].geometry.locationでリクエストの結果の中から経度と緯度の情報を取得し、
その地理座標を地図の真ん中に表示するように記述しています。
ちなみに、リクエストの結果は配列で返されるためresults[0]と記述しています。
さらに⑧でズームレベルを指定しています。
この数値が大きければ大きいほど地図は拡大して表示されます。
▼⑨〜⑪について
new google.maps.Marker({ // ⑨
map: map, // ⑩
position: results[0].geometry.location // ⑪
});
ここでは、地図上にマーカー（赤いピン）を表示させる記述をしています。
⑨でマーカーのオブジェクトを生成し、引数にオプションとしてmapとpositionの指定をしています。
⑩ではマーカーを表示する地図を指定しており、ここでは⑥で定義したmapを指定しています。
また、⑪ではマーカーを表示する位置をリクエストの結果から得られた地理座標で指定しています。
ちなみに、オプションでanimation: google.maps.Animation.DROPを追加すると、
マーカーが上から落ちてくるようなアニメーションを追加できます。
▼⑫〜⑭について
} else { // ⑫
document.getElementById('map').style.height = '20px' // ⑬
document.getElementById('map').innerHTML = '該当する場所が見つかりませんでした。' // ⑭
}
ここでは、ジオコーディングが成功しなかった場合の処理を記述しています。
⑬で地図を表示させるdiv要素の高さを変更し、⑭でHTMLの中身を文字に書き換えています。
このように記述すると、以下のように表示されます。
参考にした記事
この記事を投稿するにあたり、以下の記事を参考にさせていただきました。
以下の記事ではもっと詳細に書かれているので、詳しく知りたい方はご覧ください。
Geocoding Service | Maps JavaScript API | Google Developers
Google Maps API の使い方 利用方法 / Web Design Leaves
ジオコーディング - マッピィ Google Maps API JavaScriptの使い方 -
Google Maps JavaScript API入門