Day 12：Google Maps API

2022 iThome 鐵人賽

DAY 12

自我挑戰組

手刻武器庫，30 天前端學習心得系列第 12 篇

14th鐵人賽前端 html css javascript

東尼先生

2022-09-26 13:35:29

2597 瀏覽

分享至

組件實作 : Demo

一、前言

網頁上要顯示店家、場地等地理位置資訊，都會使用到 Google 地圖來輔助。在這個篇章中，我們要來研究關於 Google Maps API，包含如何使用金鑰，基本操作方法，以及使用一個第三方套件來改變地圖樣式，讓地圖看起來更有特色，那麼，我們開始吧～

二、Google Maps API 建置與使用

2.1 申請 Google Maps API

使用 Google 的產品，必須申請一個API Key，操作步驟如下：

瀏覽器開啟：地圖平台 - Google Developers，並且使用 Google 帳號登入。
選取專案：Select a project。
新增專案：輸入專案名稱，不能用中文。
API 和服務 ➝ 驗證 ➝ 建立憑證 ➝ 建立的 API 金鑰。
上方搜尋列搜尋： Maps JavaScript API 。
點選 Maps JavaScript API 啟用按鈕。
綁定信用卡。
開始使用 Google Maps API。

申請API Key流程可參考這篇網址【1】，API Key 的申請需要綁定信用卡，使用流量額度有限制（28,000 次/月，超過每1,000 次收費 7 美金）。如果超過流量，Google Maps 在顯示時會出現浮水印（雖然還是能夠看見地圖），那麼，以下簡單介紹 API Key 申請流程。

重點在於綁定信用卡，並且需取得API Key。另外，如果你的操作介面為英文版，操作原理也是相同，因此不用太過擔心。

Google Cloud Console 開啟後，先建立一個新專案，點選紅框處。

點選選取專案，會跳出一個視窗，選取視窗右上角的「新增專案」。

將專案取一個名稱，建議用英文，取完名稱按下藍色的建立按鈕。

有了專案後，可以直接打開左方面板的「驗證」，然後點擊畫面上方的「 +建立憑證」。此時會跳出一個視窗「建立的 API 金鑰」。

將建立的 API 金鑰複製起來，這串金鑰就是API Key，等等要將它寫進 HTML 中，可以先將它收藏起來。

此時，要將 Maps JavaScript API 啟用，在上方的搜尋框中，輸入「Maps JavaScript API 」然後選取。

啟用 Maps JavaScript API。

由於我之前有啟用過此功能，所以按鈕會被改成管理，若沒啟用過，按鈕顯示「啟用」。

想要使用API Key，你必須綁定信用卡。

綁定信用卡，會看到步驟 1，而步驟 2 就是信用卡相關資訊填寫，這裡就不先截圖了。當信用卡綁定後即可使用API Key囉～

2.3 Google Maps 的產生流程

恭喜完成上述步驟。現在，在 HTML 裡面加入剛剛申請的API Key，與一個 ID 名稱為 map 的 div，然後在 CSS 中設定 Maps 的寬度與高度，最後，在 JavaScript 中加入 Maps 的初始化方法。整個流程跑完後，應該能得到第一個地圖才對。

2.4 匯入 CDN（使用 API Key）

HTML：（匯入 API 語法寫法），寫在 body 標籤內的最下方。

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=API Key">
</script>

async 和 defer 的解釋可參考參考資料【2】【3】，其實就是確保地圖能正常載入的兩個屬性。注意在key=後面要輸入你的金鑰。

2.5 建立地圖的最小語法

建立地圖的架構，只需寫一行。

HTML：

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

再來是決定地圖的視窗大小，這裡設定圍滿版。

CSS：

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

#map {
	width: 100vw;
	height: 100vh;
}

地圖的初始化。

JavaScript：

let map;
function initMap() {
	map = new google.maps.Map(document.getElementById("map"), {
		center: {
			lat: -34.397,
			lng: 150.644
		},
		zoom: 8
	});
}
initMap();

做到這裡，應該能做出一個滿版的地圖才對，若沒有產生地圖，很有可能是你API Key的權限有問題，或是寫錯 API 的語法。

顯示結果：

三、地圖樣式套件 - Snazzy Maps

地圖的美化可以參考 Snazzy Maps，可以改變地圖的外觀樣式，套用的方式也不會太困難，那麼，以下為套用 Snazzy Maps 的方法。

3.1 選擇地圖樣式

地圖套件：Snazzy Maps - Free Styles for Google Maps。

打開官網，切換到 Explore Styles，選擇你要的樣式。

選擇你要的樣式，這裡選擇 Dark 的 Modest 樣式。

點選 EXPAND CODE，並將 Code 全部複製起來，別遺漏了。

3.2 加入地圖樣式至專案

複製 Snazzy Maps 的「JAVASCRIPT STYLE ARRAY」後，可以用將這個 ARRAY 放到 styles 屬性中，styles 可以寫在初始化的 initMap function 裡面，寫法可以直接參考下列寫法。

JavaScript：

let map;
function initMap() {
	map = new google.maps.Map(document.getElementById("map"), {
		center: {
			lat: -34.397,
			lng: 150.644
		},
		zoom: 8,
		styles: [
			{
				featureType: "all",
				elementType: "labels.text.fill",
				stylers: [
					{
						color: "#ffffff"
					}
				]
			},
			{
				featureType: "all",
				elementType: "labels.text.stroke",
				stylers: [
					{
						color: "#000000"
					},
					{
						lightness: 13
					}
				]
			},
			{
				featureType: "administrative",
				elementType: "geometry.fill",
				stylers: [
					{
						color: "#000000"
					}
				]
			},
			{
				featureType: "administrative",
				elementType: "geometry.stroke",
				stylers: [
					{
						color: "#144b53"
					},
					{
						lightness: 14
					},
					{
						weight: 1.4
					}
				]
			},
			{
				featureType: "landscape",
				elementType: "all",
				stylers: [
					{
						color: "#08304b"
					}
				]
			},
			{
				featureType: "poi",
				elementType: "geometry",
				stylers: [
					{
						color: "#0c4152"
					},
					{
						lightness: 5
					}
				]
			},
			{
				featureType: "road.highway",
				elementType: "geometry.fill",
				stylers: [
					{
						color: "#000000"
					}
				]
			},
			{
				featureType: "road.highway",
				elementType: "geometry.stroke",
				stylers: [
					{
						color: "#0b434f"
					},
					{
						lightness: 25
					}
				]
			},
			{
				featureType: "road.arterial",
				elementType: "geometry.fill",
				stylers: [
					{
						color: "#000000"
					}
				]
			},
			{
				featureType: "road.arterial",
				elementType: "geometry.stroke",
				stylers: [
					{
						color: "#0b3d51"
					},
					{
						lightness: 16
					}
				]
			},
			{
				featureType: "road.local",
				elementType: "geometry",
				stylers: [
					{
						color: "#000000"
					}
				]
			},
			{
				featureType: "transit",
				elementType: "all",
				stylers: [
					{
						color: "#146474"
					}
				]
			},
			{
				featureType: "water",
				elementType: "all",
				stylers: [
					{
						color: "#021019"
					}
				]
			}
		]
	});
}
initMap();

顯示結果：