なにをやりたいのか?
google map api for javascriptを使用することで例えば以下のようにGooglemap をwebページで表示させることができる。
このうちmouseイベントを捕まえることで地図上のスポット(赤丸で囲んだような施設情報を持つ場所)の情報を取得したい。
googlemap api はそもそも3種類に分かれている
上記の地図を表示してみるとわかるのだが、上記で表示できるのは機能制限されたGoogle mapのようなもので、デフォルトではクリックしてもピンは立てられないし、スポットをクリックしても簡易的な情報しか表示されない。(スポットの詳細データはそもそも提供されていないかもしれない)
api自体は以下の(webで使用するものに限れば)3種類に分かれており、必要に応じてGCPで該当のAPIを有効化する必要がある。
- google map api for javascript
- place api
- route api
今回はこのうち、google map api for javascriptとplace apiを使用する。
結論
クリックイベントにplaceIdが含まれるかどうかで判定する。 具体的なコードは以下のような感じになる。
map.addListener("click", (event) => { if ("placeId" in event) { const placesService = new google.maps.places.PlacesService(map); placesService.getDetails({ placeId: placeId }, (place, status) => { if (status === "OK") { //placeから情報を取得する処理
上記ではplaceIdでスポットかそれ以外を判定して、スポットだった場合はplace apiのgetDetailes()
でスポットの名称や住所等の情報を取得している。