vue+typescript+js-api-loaderでのgooglemap使用方法【'google' is not defined】

色々ハマったのでメモ。

型定義パッケージを追加してtsconfig.jsonのtypesに追加

terminal

npm i -D @types/google.maps 

tsconfig.json

"compilerOptions": {
//////省略//////////
    "types": [
      "google.maps", //追加
    ],
//////省略//////////
}

#Loaderをインストール

terminal

npm install @googlemaps/js-api-loader 

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

ここまでは公式通り

#トラブルシューティング（'google' is not defined）
const google=window.google;を追加

Map.vue

  mounted() {
    const loader = new Loader({
      apiKey: "YOUR_API_KEY",
      version: "weekly",
    });

    let map: google.maps.Map;

    loader.load().then(() => {
      const google=window.google; //追加
      map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });
    })
  },