# Nuxt3 加入 Google Map Javascript API
:::info
套件：[**@fawmi/vue-google-maps**
](https://vue-map.netlify.app/docs/)
:::

## 0. 前置：[去申請 google map api 的 key](https://console.cloud.google.com/)
申請會要綁信用卡，但每月有免費的額度。
#### [Maps JavaScript API 的說明文件](https://developers.google.com/maps/documentation/javascript/overview?hl=zh-tw)
## 1. 安裝套件

npm install -S @fawmi/vue-google-maps

## 2. 在 nuxt3 加入套件
### 把 api key 放在 `nuxt.config.ts` 的 `runtimeConfig` 內

// nuxt.config.ts
runtimeConfig: {
    public: {
      mapApiKey: "你的google map API key",
    },
  },

### 3. 在 plugins 新增 `vue3-google-map.client.js`

// plugins/vue3-google-map.client.js
import VueGoogleMaps from "@fawmi/vue-google-maps";

export default defineNuxtPlugin((nuxtApp) => {
  const runtimeConfig = useRuntimeConfig();
  const { mapApiKey: MAP_API_KEY } = runtimeConfig.public;

  nuxtApp.vueApp.use(VueGoogleMaps, {
    load: { key: MAP_API_KEY },
  });
});

然後就可以使用啦~

## 4. 在想要的地方插入 google map

<GMapMap
        :center="{lat: 51.093048, lng: 6.842120}"
        :zoom="7"
    />

其他功能請自行看套件的說明文件

## 可能會遇到的問題
參考[**這個討論**](https://github.com/fawmi/vue-google-maps/issues/188)，在 `nuxt.config.ts` 的 `vite` 內加入下面的 code 即可解決這個問題。

// nuxt.config.ts
vite: {
    optimizeDeps: {
      include: ["@fawmi/vue-google-maps", "fast-deep-equal"],
    },
  }