のーずいだんぷ

主に自分用メモですが、もしかしたら誰かの役に立つかもしれません

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

なにをやりたいのか?

google map api for javascriptを使用することで例えば以下のようにGooglemap をwebページで表示させることができる。

google map api によるgoogle mapの表示
google map api によるgoogle mapの表示

このうち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()でスポットの名称や住所等の情報を取得している。

参考

developers.google.com

developers.google.com