今天完成的結果：

Todo

• 加入 google maps
• 申請 google maps api key

加入 google maps

前面介紹 capacitor 就有提到 ionic 專案建置時已經安裝好 capacitor 相關套件，如果跟 ionic framework 一起使用。

• 在 Terminal 輸入下列指令，將 capacitor 加到專案中

  ionic integrations enable capacitor
  

capacitor 有提供 google-maps 的 API ，在 @capacitor/google-maps有詳細的安裝方法與各平台使用 google maps 的設定方式。

• 輸入以下指令就安裝好了！

  npm install @capacitor/google-maps
  

• 官網沒有 Vue 的範例，這邊貼上我在 Vue 專案運作的範本，<capacitor-google-map> 代表 google map 的顯示區塊，但 google map 本身沒有樣式，所以要另外在 CSS 設定顯示元素及寬高，若沒有設定好會顯示不出來喔！apiKey 這欄要輸入自己申請的 API KEY

  <template>
      <capacitor-google-map id="map"><capacitor-google-map>
  </template>
  
  <style>
  capacitor-google-map {
  display: inline-block;
  width: 100%;
  height: 100vh;
  }
  </style>
  <script setup>
  import { ref, onMounted } from "vue";
  import { GoogleMap } from "@capacitor/google-maps";
  
  const createMap = async () => {
  const mapRef = document.getElementById("map");
  
  const newMap = await GoogleMap.create({
      id: "my-map", 
      element: mapRef,
      apiKey: "YOUR_API_KEY_HERE",
      config: {
      center: {
          lat: 33.6,
          lng: -117.9,
      },
      zoom: 8,
      },
  });
  };
  
  onMounted(() => {
  createMap();
  });
  </script>
  

google maps api key

Google Maps API key 要從 Google Cloud 來申請，首先從導覽選單中找地圖平台，進去建立新專案，建立憑證中選擇 API 金鑰，再根據導覽輸入詳細資料及信用卡卡號即可得到一組 API KEY，也可以查看 地圖平台 > 建立 API 金鑰 的教學。每個月有 28000 筆的 API 查詢免費額度，當然超過是要收費的！

記得 API key 要收好不要公開喔～