Google Maps API 學習筆記-1：地圖、標記、客製樣式
本篇大綱：
- 原來google map api有每個月的免費額度
- 申請Google Map API Key
- 開始使用Map Javascript API
- 放置多個標記
- 標記(Marker)客製化
google預設的4種圖案
直接讀一個圖檔
marker的另外2個參數 - Info Windows
- 客製化地圖樣式
night mode地圖
個重要的連結
隱藏地圖上其他商家 - 隱藏地圖上UI
- 本篇原始檔下載
一、原來google map api有每個月的免費額度
之前聽到google map api要錢，就一直沒想碰這塊，最近朋友在問，回頭去看了一下定價後，才發現官網上面寫每個月有200美金的免費額度。
照免費的額度表上看，因為這篇會用到的是「Maps JavaScript API」，是屬於「Dynamic Maps」這個，每個月可以載入28000次，超過才開始計價。
28,000次耶，一般頁面正常使用，那個流量都可以放個廣告了吧。覺得自己平常在玩的小頁面不會到這個量，就想來學一下。
這篇筆記主要想寫的，是文件上從「Get an API Key」，一直看到「Interacting with the Map」這邊的學習記錄，一邊看一邊實作。
因為想要記下的是以後會常用到的功能，所以想看所有google map api的話，可以直接看官方文件。
本篇參考、使用資源如下：
1 官網Maps Javascript API文件
2 js framework：Vue.js
3 css framework：Bootstrap4
4 icon：Eva Icons
二、申請Google Map API Key
API Key要從Google Cloud Platform(GCP)的後台申請。
這邊新開一個專案來用，填寫完專案名稱後按確認，GCP就會執行開新專案的動作。
建立完後，點選剛新增的專案，就會列出跟map相關的一堆API：
這邊用的是Maps Javascript API，點進去後再點啟用，GCP就可以看到了：
確認完要用的API是啟用狀態後，接著生成一組API Key，以及對這組API Key設定限制，防止有人看到你的API Key後，拿去偷用。
直接點啟用API那邊的項目，再點憑證，或是直接進入GCP憑證頁面後，就會看見要申請的區塊：
點選API金鑰，會出現一個金鑰的Key，把值copy下來，之後頁面在引用js時，就是這樣：
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
</script>
GCP很貼心的提醒要為金鑰增加限制，點選「限制金鑰」後，會看見4種限制方式：
要用哪一種就看各人了。
官方文件連結：Get an API Key。
三、開始使用Map Javascript API
新增一個html的頁面，引用map js：
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"</script>這邊因為有用Vue.js，所以會把後面的「callback=initMap」刪掉，改成window load完後再執行initMap()。
以下寫的code，很偷懶的直接用ES6，如果要支援度高一點的話，請自行編譯成ES5
初始化地圖(initMap)的function，做2件事：
1 建立地圖，設定地圖中心點
2 放置標記(marker)
html如下(css framework：bootstrap4)：
<div id="app" class="container">
<div class="row">
<div class="col">
<div id="map" class="embed-responsive embed-responsive-16by9"></div>
</div>
</div>
</div>js如下：
開啟頁面後，就會看到如下：
對，看起來就跟一般我們在用google map差不多，畢竟只用了基本功能，想有些不一樣就要再加一些code。
四、放置多個標記
要放多個標記前，當然可以直接在頁面上加一個陣列，然後資料全寫在裡面。
但google文件上在這部份用了比較好的做法，就是把資料收集在一個檔案上，然後GET進來。
之所以會寫這點，是因為他的檔案不是常見的xxx.json，而是xxx.geojson。
看了文件後才知道有geojson這格式，維基百科上寫是拿來記錄地理訊息的json。
參考google文件的範例，把幾個點的位置存成了map.geojson，如下：
geometry裡的經緯度必填。
properties，看示範時很像是可以填自己客製的東西，就拿來填名稱跟地址，之後在info windows時會用到。
有了各地點的檔案後，就是用回圈把每個地點設成marker，js如下：
開啟頁面後，看到如下：
對，看上去也跟用 My Map 的功能一樣，沒什麼厲害的。畢竟這也只是在基本的地圖上，多放了幾個標記而已。
接下來再加上可以用的參數，看上去就會不一樣了。
五、標記(Marker)客製化
對網頁上要放google map來說，最會被企畫問到的問題就是：「標記的圖案可以改嗎？」、「標記可以改成公司的logo嗎？」
google map api有提供修改標記的參數，主要有2個可以用：
1 用google預設的4種圖案
2 直接讀一個圖檔
google預設的4種圖案
使用的方式很簡單，在js裡，marker的部份改成以下：
var marker = new google.maps.Marker({
position: latLng,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
map: map
});icon.path，有4種可用，顯示出來的樣式如google提供的圖表：
直接讀一個圖檔
直接讀一個圖檔，是更能達成企畫需求的方式，code如下：
var marker = new google.maps.Marker({
position: latLng,
icon: '圖檔的絕對路徑.png',
map: map
});code很簡單，icon的值直接寫入圖檔路徑就行。
這邊直接在Eva Icons上抓一張圖來用，code如下：
marker的另外2個參數
「標記」除了自定icon，還有另外2個參數可以用：
1 可否拖拉
2 動態效果
可否拖拉的參數是「draggable」，動態效果是「animation」：
let marker = new google.maps.Marker({
position: latLng,
map: this.map,
animation: google.maps.Animation.DROP, // DROP掉下來、BOUNCE一直彈跳
draggable: false // true、false可否拖拉
});這一階段會看到的結果如下：
六、Info Windows
在標記上，還有一個很特別的功能，是要用API才會有的，就是Info Windows，資訊小視窗，樣式如下：
官方文件中，info windows有專門的一頁在介紹，這邊就直接製作一個範例出來。(info Windows官方文件)
在用回圈寫入marker時，就要把info Windows加進去，並監聽click事件。
這邊的範例再特別寫入一個，由外面的按鈕讓marker上的info windows被打開，而不是一定要點到marker才會打開。
html用v-for為每個地點加入一個按鈕，並加上@click事件：
<button type="button" class="btn btn-outline-secondary"
v-for="f in features" @click="openInfoWindows(f.properties.id)"
>
{{ f.properties.name }}
</button>js部份如下：
看到的頁面截圖如下：
七、客製化地圖樣式
API除了可以做出客製標記(marker)、info windows外，還可以做一個直接用google map做不到的事，就是客製化地圖樣式。
這邊直接參考文件的示範，寫一個night mode的地圖，跟隱藏商家的地圖。
night mode地圖
在一開始建立地圖，也就是以下這段的時候：
this.map = new google.maps.Map(document.getElementById('map'), {
center: location,
zoom: 16,
mapTypeId: 'terrain',
styles: [ /* ... */ ] // 這邊可加入客製style
});就可以加入一個「styles」的參數，把想要的樣式給加進去了。當然，加的規則必須照著文件上的寫。(Start Styling your Map官方文件)
這邊寫一個可以用toggle按鈕，切換日間/夜間地圖的範例：
以下是頁面截圖：
2個重要的連結
這邊附上2個重要連結：
1 每一個feature、element的說明：
2 styles生成器：
有了以上這2個連結，想用一些自訂的模式就比較容易了。
隱藏地圖上其他商家
以下附上隱藏商家的demo，主要是覺得會有企畫提出「地圖上東西太多太干擾了想隱藏掉」、「地圖上出現其他同業了啦要刪掉」這種需求。
其實會了上面的night mode以後，隱藏商家就容易了，設定的styles比夜間模式還少，styles上改成以下就行：
hideStyle: [{
featureType: 'poi.business',
stylers: [{
visibility: 'off'
}]
}]頁面的截圖如下：
拿掉商家後，地圖一整個乾淨很多。
八、隱藏地圖上UI
google map上有一些預設的UI，如下圖紅框：
google map api有提供參數去隱藏/顯示它們，如下：
zoomControl: boolean
mapTypeControl: boolean
scaleControl: boolean
streetViewControl: boolean
rotateControl: boolean
fullscreenControl: boolean
要使用時，只要在建立地圖上加上這些參數就行了，例如：
this.map = new google.maps.Map(document.getElementById('map'), {
center: location,
zoom: 16,
mapTypeId: 'terrain',
mapTypeControl: false
});九、本篇原始檔下載
google map API的官方文件有好幾頁，有很多東西可以玩，這篇是看到現在的第一階段筆記，記錄一下覺得以後會遇到的需求。
上面的原始碼整理在Github上了，歡迎使用：
Google Map API學習筆記系列
1. 地圖、標記、客製樣式
2. 在地圖上畫個日本結界
3. 用熱圖(Heat map)製作全台12小時雨量分佈圖
4. place API自動完成地址、地點評論摘要
