google map apiでクリックしたスポットの情報を取得したい

なにをやりたいのか？
googlemap api はそもそも3種類に分かれている
結論
- 参考

なにをやりたいのか？

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から情報を取得する処理