Nuxtでgoogle maps apiを使ってみた

先にGoogle Maps APIのAPI キーを取得しておきます。
クレジットカードがいるみたいです。

　　　
　　

で、goole Map を使うためのライブラリを入れます。

npm i @googlemaps/js-api-loader
npm i -D @types/google.maps

　　

で、あとはサンプルコード通りに書いたら終わり。

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

const loader = new Loader({
  apiKey: "",
  version: "weekly",
  libraries: ["places"]
});

const mapOptions = {
  center: {
    lat: 0,
    lng: 0
  },
  zoom: 4
};

　　　
　　　

のはずが、ここをonMountedに書いたら動かなかった

onMounted(() => {
    loader
      .importLibrary('maps')
      .then(({Map}) => {
        new Map(document.getElementById("map"), mapOptions);
      })
      .catch((e) => {
        // do something
      });
});

　　
　　　

なんでかonMountedでも
document.getElementById("map")がundefindになってた。
　　　
　　　　
なのでとりあえずdocument.getElementById("map")の要素をrefにして、
watchして値が入ったら動かすようにしたら直った。