GoogleMapで警告が出るから修正する

GoogleMapsAPI使ってたら、警告が出てるので修正しようと思う

google.maps.event.addDomListener() is deprecated, use the standard
        addEventListener() method instead:
        https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener
  The feature will continue to work and there is no plan to decommission
  it.

作業環境

• Nuxt.js (v2.15.8)
• vue2-google-maps (v0.10.7) を使用
• @googlemaps/markerclustererplus (v1.2.10)　を使用

とりあえず警告をなんとかするため最新ライブラリにする

1) google.maps.event.addDomListener() で書いている所を修正

addDomListenerは非推奨となったので、使っている部分は修正

イベントの種類は以下を参照
https://developers.google.com/maps/documentation/javascript/reference/event?hl=ja

2) vue2-google-mapsが4年以上更新されてないので使うのを辞める

パッケージをインストールして、

npm install @googlemaps/js-api-loader

インポートする

import { Loader } from "@googlemaps/js-api-loader"

手順は公式に乗ってるので、あとは割愛
https://developers.google.com/maps/documentation/javascript/overview?hl=ja#js_api_loader_package

3) @googlemaps/markerclustererplusは@googlemaps/markerclustererにMergeされたっぽい!!

詳しいHistoryはMakerClustererの公式ドキュメントを見てね

最新ライブラリをインストール

npm install @googlemaps/markerclusterer

インポートしてMakerClustererを追加

import { MarkerClusterer } from "@googlemaps/markerclusterer";

const markerCluster = new MarkerClusterer({ map, markers });

公式ドキュメント
https://developers.google.com/maps/documentation/javascript/marker-clustering?hl=ja

ライブラリのドキュメント
https://googlemaps.github.io/js-markerclusterer/

ライブラリのドキュメントが英語で理解するのに時間を溶かしたので、
別投稿でメモする予定、乞うご期待！

まとめ

@googlemaps/markerclustererplus ライブラリ内で
google.maps.event.addDomListener() の記述があるっぽい
（という何かを見かけた、知らんけど）

元々は
@googlemaps/markerclusterer はClusterer化出来るライブラリ
@googlemaps/markerclustererplus はClustererした時のMakerIconをカスタマイズするライブラリっぽい

@googlemaps/markerclustererplusの実装は以下でお世話になりました、感謝
https://blog.ryou103.com/post/marker-cluster-customize/

次の記事