Nuxt2(composition-api)でGoogle MapとMakerを表示

とりあえず備忘録。

APIキー取得

APIをMaps Javascript APIを許可してKEYを取得。
.ENVに追加して、nuxt.configでpublicRuntimeConfigに設定

const config = {
  publicRuntimeConfig: {
    gmapAPIKey: process.env.GMAP_API_KEY,
  },
 // :

ライブラリ

公式に沿って、mapとmakerのライブラリを追加

npm i -D @googlemaps/js-api-loader @googlemaps/markerclusterer

typeを追加

tsconfig.json

{
  "compilerOptions": {
    "types": [
      "@googlemaps/js-api-loader",
      "@googlemaps/markerclusterer"
      　// ：

vueファイル作成

とりあえずthis.$refs代わりの空refを追加して、全画面表示になるようにCSSを設定。ライブラリも読み込む

index.vue

<template>
  <div ref="googleMapEl" class="googlemap" />
</template>

<script lang="ts">
import { defineComponent, ref } from '@nuxtjs/composition-api'
import { Loader } from '@googlemaps/js-api-loader'
import { MarkerClusterer } from '@googlemaps/markerclusterer'

export default defineComponent({
  setup () {
    const googleMapEl = ref()

    return {
      googleMapEl
    }
  }
})
</script>
<style scoped>
.googlemap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>

Loaderの作成

contextから、configで設定したAPIキーを呼びだし、setup内でLoaderインスタンスを作成

setup () {
    const context = useContext()
    const { $config } = context
    const loader = new Loader({
      apiKey: $config.gmapAPIKey
    })
}

各初期化

const GOOGLE = ref()

onMounted(() => {
  createMapLoader()
})

const createMapLoader = () => {
  loader.load().then((google) => {
    GOOGLE.value = google
    initMarker()
    initMap()
  }).catch(e => {})
}

　MAPの初期化

onMountedでマップを初期化。
loader使って,マップを新規に作成。ここで作った値をmaker側でも使うので、setup内で使えるようにしとく
template内のgoogleMapに描写。
maker用のインスタンスもついでに初期化

const MAP = ref()

const initMap = () => {
  const mapOptions = {
    center: {
      lat: 35.6769883,
      lng: 139.7588499
    },
    zoom: 12
  }
  MAP.value = new GOOGLE.value.maps.Map(googleMapEl.value, mapOptions)
}

マーカーを初期化

空配列でマーカー用のクラスターを生成しとく

const markerClusterer = ref()

const initMarker = () => {
  const markers = [] as any[]
  markerClusterer.value = new MarkerClusterer({ markers, map: MAP.value })
}

onClickでマーカーを追加

const onClick = () => {
  const marker = new GOOGLE.value.maps.Marker({
    position: { lat: 35.6769883, lng: 139.7588499  }
  })
  markerClusterer.value.addMarker(marker)
}

マーカー自体をonClickでマーカー削除

マーカーを作成するときに、自滅用イベントを追加

const onClick = () => {
  const marker = new GOOGLE.value.maps.Marker({
    position: { lat: 35.6769883, lng: 139.7588499  }
  })
  // 上記削除イベントを追加
  marker.addListener("click", () => {
    markerClusterer.value.removeMarker(marker)
  })
  markerClusterer.value.addMarker(marker)
}