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 的必要屬性有兩個：

屬性名稱 說明
center 中心點經緯度，center 是一個物件，物件內分別有 lat ( 緯度 ) 與 lng ( 經度 ) 兩個屬性。
zoom 預設縮放大小，zoom 的數值可從 0 到 21，也可以透過其他設定屬性，指定最小與最大值。

MapOptions 控制項

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

控制項名稱 說明
mapTypeControl 預設 true，地圖與衛星類型。
fullscreenControl 預設 false，全螢幕地圖。
rotateControl 預設 false，旋轉 45 度地圖，必須放大到一定程度才會出現，若不支援 45 度的地圖則不顯示。
scaleControl 預設 false，比例尺。
streetViewControl 預設 true，地圖與街景切換。
zoomControl 預設 true，放大縮小地圖。

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

控制項名稱 說明
mapTypeControlOptions 地圖與衛星類型 UI，位置預設左上方
fullscreenControlOptions 全螢幕地圖 UI，位置預設右上方
rotateControlOptions 旋轉 45 度地圖 UI，位置預設右下方
scaleControlOptions 比例尺 UI，位置預設右下方
streetViewControlOptions 地圖與街景切換 UI，位置預設右下方
zoomControlOptions 放大縮小地圖 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 其他屬性

控制項名稱 說明
clickableIcons ( true/false ) 地點標記能否點擊，預設 true 當我們用滑鼠點擊地圖上的地點標記，會彈出資訊視窗說明。
disableDefaultUI ( enabled/disabled ) 顯示或隱藏預設 UI，預設 enabled 的 UI 會顯示相關控制項的 UI。
disableDoubleClickZoom ( enabled/disable ) 可否滑鼠點兩下放大地圖，預設 enabled 滑鼠連點兩下地圖會放大。
scrollwheel ( true/false ) 是否支援滑鼠滾輪，預設 true 可用滑鼠滾輪縮放地圖。
draggable ( true/false ) 可否拖曳移動地圖，預設 true 可以用滑鼠拖曳移動地圖。
keyboardShortcuts ( true/false ) 是否支援鍵盤熱鍵，預設 true 可以。
tilt ( 0/45 )指定衛星圖的顯示方式，數字 0 是 0 度 ( 正上方往下看 )，數字 45 則是 45 度地圖 ( 如果該地區地圖不支援 45 度則一律以 0 度顯示 )。
heading 若地圖支援 45 度地圖，可設定旋轉的方向 ( 每 90 度為一個單位 )。
mapTypeId 地圖類型，共有四種：hybrid、roadmap、satellite 和 terrain，hybrid 是地圖與衛星空照圖合在一起，roadmap 則是純粹地圖，satellite 是純粹衛星空照圖，terrain 則是地圖與地形圖合在一起 ( 參考 範例圖片 )。
noClear ( true/false ) 是否清除地圖 div，預設 false。
styles 陣列形式，表示這個地圖顯示出來的樣式。
maxZoom 地圖最大縮放尺寸。
minZoom 地圖最小縮放尺寸。
backgroundColor 地圖背景顏色，背景色表示地圖尚未載入之前的背景色，和 CSS 設定比較不一樣的地方，CSS 呈現的是 div 的背景色，而這個屬性是地圖在初始化時的背景色。
draggableCursor 在可拖曳的地圖下，滑鼠的游標圖案，設定方式和 CSS 相同。
draggingCursor 正在拖曳的地圖裡，滑鼠的游標圖案，設定方式和 CSS 相同。

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

範例：demo03.html

小結

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

有興趣瞧瞧其他新文章嗎？