之前看到官方網站有列出 Google Map 的套件，本來就想試玩一下，但是看了一下該套件的 github 看了一下，果然還沒有支援 Capacitor，所以最後改用 Javascript 的方式實作。

這次要做的小 demo 是上次 Day 6 List & 無限捲軸 中所有的美食項目點下去顯示出 Google Map 跟商家的位置。

申請 API Key

https://console.cloud.google.com/
基本上，使用 Google Account 登入，建立專案，選擇 Maps JavaScript API ，建立憑證後就可以拿到 API Key。
比較讓我困惑的應該是 限制 API Key 那邊有點不知道要怎麼填。
我目前應用程式限制選 HTTP 參照網址 (網站)，網站限制填 *://localhost/*。

Google Map 顯示商家位置

在 index.html 的 head 部分加上 google map api 的 script。 最重要的是 Key 在 QueryString 的部分，因為是在前端，所以剛剛說的限制 API Key 那邊很重要，不然別人就可以用你的 API Key 。
目前查到的資料是 每個月 28000 次的動態地圖載入，如果超過每 1000 次收費 7 美金。

新增一個頁面 eat-location

在 eat.page.html 增加 eat-location.page 的入口點

在 eat.page.ts 實作 showLocation() 起一個 Modal 顯示 eat-location 並把商家的資料傳過去。

在 eat-location.page.html 設置一個元素，準備放地圖

設置一下 CSS 長寬 100%，記得一定要設置，沒有設置還以為地圖沒出來。

最後，eat-location.page.ts
line 3 ，我宣告了一個 declare var google: any; 主要是當作我在 index.html head 裡加入的 Google Map API script 使用。 如果不加這句，下面就不能用 new google 這種寫法了。
line 12 ， 從 eat.page.ts 那邊取得美食商家的資料。
line 16 ， ionViewDidEnter() 當進入頁面時觸發，loadGoogleMap() 如果不放在這邊 div#googleMap 會吃不到，而發生 undefined 的錯誤。
line 21，new google.maps.LatLng() 設置經緯度。
line 22，new google.maps.Map() 地圖藉由 div#googleMap 元素顯示。
line 30，new google.maps.Marker() 建立地圖標記。 line 37，marker.setMap(this.googleMap); 設置在地圖上
line 38，new google.maps.InfoWindow 建立一個資訊小視窗，點地圖標記的時候可以顯示資訊。

小結語，Google Map 初體驗，覺得新鮮。
遇到最大的困難應該是一開始不知道官網那個 google map 的套件沒有辦法用
看到他的 npm install 之後需要 ionic cordova ..去安裝套件就開始懷疑了，最後去 github issue 去找，果然沒有 support Capacitor。

結果