Vue.js / Google Maps JS API でクリックされたmarkerにアニメーションをつける

はじめに

Vue.js / Nuxt.js で Google Maps に marker アニメーションをつけてみたので、共有します
一番最新にクリックされたmarkerだけにアニメーションを適用します

公式ドキュメントの解説

ドキュメントはこのあたりに解説があります

• Adding a Google Map with a Marker to Your Website  |  Maps JavaScript API  |  Google Developers
• Marker  |  Maps JavaScript API  |  Google Developers

コード（抜粋）

mapMarker メソッドの click イベント発火時に enableClikedMarkerAnimation メソッドを登録しておきます
実際には mapMarker をループで処理して複数の marker を登録しています

enableClikedMarkerAnimation メソッドはGMapMarkers のすべての marker のアニメーションをキャンセルし、 クリックされた marker のみに BOUNCE アニメーションを設定します
クリックされた marker を一番上に表示したい（ marker が重なっていた場合）ので marker.setZIndex(this.markerMaxZIndexCount + 1) のようにします

マップ上の marker のないエリアのクリック時にも marker アニメーションはすべてキャンセルされるよう、 mapClickEvents でそれを指定します

Map.vue

<template>
  <div class="map">
    <div ref="map" class="map__google-maps_embedded"></div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      GMap: {} as google.maps.Map, // window.google object
      GMapMarkers: [] as Array<google.maps.Marker>,
      markerMaxZIndexCount: 100000,
    }
  },
  methods: {

    mapClickEvents(): void {
      /* eslint-disable @typescript-eslint/no-unused-vars */
      this.GMap.addListener('click', (event: google.maps.MapsEventListener) => {
        this.clearSelectedStore()
        this.clearAllMarkerAnimation(this.GMapMarkers)
      })
    },

    mapMarker(storeId: string, storeName: string, position: google.maps.LatLngLiteral, map: google.maps.Map, icon?: google.maps.Symbol): void {
      /*
      add single marker and associated click event to the map
      */

      const self = this
      let marker = {}

      marker = new window.google.maps.Marker({ position, map, })

      /* eslint-disable @typescript-eslint/no-unused-vars */
      ;(marker as google.maps.Marker).addListener('click', async (event: google.maps.MapMouseEvent) => {
        // add marker animation
        this.enableClikedMarkerAnimation(this.GMapMarkers, (marker as google.maps.Marker))
      })

      this.GMapMarkers.push((marker as google.maps.Marker))
    },

    enableClikedMarkerAnimation(GMapMarkers: Array<google.maps.Marker>, marker: google.maps.Marker): void {
      /*
      Clear all marker animations and apply 'BOUNCE' animation to only the latest clicked map marker
      */

      this.clearAllMarkerAnimation(GMapMarkers)

      // add marker animation to only the latest cliked marker
      marker.setAnimation(google.maps.Animation.BOUNCE)
      marker.setZIndex(this.markerMaxZIndexCount + 1)
    },

    clearAllMarkerAnimation(GMapMarkers: Array<google.maps.Marker>): void {
      /*
      clear all marker animation
      */
      GMapMarkers.forEach(eachMarker => {
        eachMarker.setAnimation(null)
      })
    }
  }
})
</script>