Google Maps API - 使用地圖與基本設定

有別於 Embed API，如果要開始使用 Google Map 的功能，就必須透過 JavaScript API 才能實現，這篇將會記錄相關的用法以及做些範例展示。

Google Maps JavaScript API

要使用 JavaScript API 得先到 Google API Console 裡啟用。

雖然和 Embed API 類似，但 JavaScript API 不能免費無限次數使用，免費的版本一天有 25,000 次的使用限制，超過之後當天就無法使用，所以必須善用金鑰的保護限制，避免金鑰外流。

收費規範參考：Google Maps JavaScript API 使用限制。

載入地圖

載入地圖的方法一開始在 html 裡放入一個 div 作為地圖區域，並指定一個 id。

<div id="map"></div>

設定這個 div 的寬高，以下方的例子來說，設定為滿版的地圖。

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  width: 100%;
}

JavaScript 的部分透new google.maps.Map將地圖載入指定的 div 內，地圖包含兩個必要的屬性：center 中心點經緯度、zoom 縮放層級，以下方的例子來說，網頁打開就會看到一個滿版的地圖，中心點位在紐約自由女神像。

範例：demo01.html

<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 40.689104, lng: -74.044599},
      zoom: 16
    });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=你的金鑰&callback=initMap"
async defer></script>

MapOptions 必要屬性

在上面的 JavaScript 裡，使用了new google.maps.Map將地圖載入，這段可以直接看 Google 參考文件中的 Map class，當中包含兩個參數，第一個是指定的地圖 div 區塊，第二個則是地圖設定，使用時會 new 一個地圖物件，針對當中的 Map 屬性去做修改設定。

參考：Map class

new google.maps.Map(mapDiv:Element, opts?:MapOptions)

當中比較重要的是地圖的 MapOptions，MapOptions 的必要屬性有兩個：

MapOptions 控制項

控制項屬性不是必要屬性，主要讓我們能在地圖的四周添加對應的控制元件 UI，例如放大縮小、旋轉、全螢幕、街景切換...等，控制項都是用 true 和 false 作切換，true 會顯示，false 則不會顯示控制項有下列這幾個：

這些控制項也有另外的屬性可以進行 UI 位置與樣式的設定，位置設定內容可以參考 控制項定位，樣式可以參考 控制項選項，這些設定的分別是：

以下面的例子來說，打開地圖後，切換為衛星檢視，放大到一定程度可以看到一個 45 度角的自由女神衛星地圖，而中間正上方是地圖與衛星圖的切換，右邊中間為旋轉的按鈕，右下方是放大縮小按鈕，右上方為全螢幕按鈕，左上方是街景圖按鈕，左下方則是比例尺。

範例：demo02.html

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.689104, lng: -74.044599},
    zoom: 16,
    mapTypeControl:true,
    fullscreenControl:true,
    rotateControl:true,
    scaleControl:true,
    streetViewControl:true,
    zoomControl:true,
    mapTypeControlOptions:{position:google.maps.ControlPosition.TOP_CENTER},
    fullscreenControlOptions:{position:google.maps.ControlPosition.TOP_RIGHT},
    rotateControlOptions:{position:google.maps.ControlPosition.RIGHT_CENTER},
    scaleControlOptions:{position:google.maps.ControlPosition.RIGHT_BOTTOM},
    streetViewControlOptions:{position:google.maps.ControlPosition.TOP_LEFT},
    zoomControlOptions:{position:google.maps.ControlPosition.RIGHT_BOTTOM}
  });
}

MapOptions 其他屬性

舉例來說，將 mapTypeId 設定為 terrain，就可以得到一個帶有地形圖地圖了。

範例：demo03.html

小結

透過地圖本身的屬性設定，就已經可以做出一些和一般地圖不一樣的感覺，再來會慢慢修改地圖以及增加地圖上的元素，打造一個真正客製化的地圖喔~