Google Maps每天都可以幫助我們在道路上導航，並以幾十年前難以想像的方式找到地點。它不僅在尋路中有用，而且還可以看到許多用於數據可視化的地圖示例，例如最近有多少網站正在使用地圖可視化COVID-19在全球範圍內的傳播。今天，讓我們學習如何使用Google Maps JavaScript API為我們的網站和應用程序構建自定義地圖。
您可能想知道為什麼我們可以改為使用靜態地圖，或者使用可用的WordPress插件之一來進行編碼而無需使用Google Maps JavaScript API來構建地圖。
當然，當您想在網站上顯示某些營業地點時，這兩者都是絕佳的選擇。但是，當您想要構建自定義地圖的時間比預建插件所提供的更為複雜時，Google Maps JavaScript API可以為您提供更多的控制時間。
如果您不想花時間在編碼上，並且想要一種更直接的方式在您的網站上顯示地圖，建議您使用Otter的Google Maps塊。
獲取Google Maps JavaScript API密鑰
在開始之前，我們首先需要獲取Google Maps的API密鑰。您可以從這裡獲得。 Google Maps API並非完全免費，但是它附帶了一個免費計劃，足以應付大多數情況。
獲得了API密鑰？從迴旋處的第三個出口離開，然後繼續本教程。 ?
創建一個簡單的地圖
具有默認設置的基本Google Maps實例。
首先，讓我們構建一個簡單的Google Map來開始。雖然您可以分離JavaScript和CSS，但在本教程中我們將使用單個HTML文件。這是我們將要使用的結構：
.wp-block-code {
邊界：0;
填充：0;
}
.wp-block-code> div {
溢出：自動；
}
.hljs {
框大小：border-box；
}
.hljs.shcb-code-table {
顯示：表；
寬度：100％;
}
.hljs.shcb代碼表> .shcb-loc {
顏色：繼承；
顯示：錶行；
寬度：100％;
}
.hljs.shcb代碼表.shcb-loc> span {
顯示：表格單元格；
}
.wp-block-code code.hljs：not（.shcb-wrap-lines）{
空白：pre;
}
.wp-block-code code.hljs.shcb-wrap-lines {
空白：預包裝；
}
.hljs.shcb-line-numbers {
邊框間距：0；
計數器重置：行；
}
.hljs.shcb-line-numbers> .shcb-loc {
反增量：行；
}
.hljs.shcb-line-numbers .shcb-loc> span {
左填充邊：0.75em;
}
.hljs.shcb-line-numbers .shcb-loc :: before {
右邊框：1px實心#ddd;
內容：櫃檯（行）；
顯示：表格單元格；
填充：0 0.75em;
文字對齊：右；
-webkit-user-select：無；
-moz-user-select：無；
-ms-user-select：無；
用戶選擇：無；
空白：nowrap;
寬度：1％;
}
載入Google Maps API後，它將調用用於初始化地圖的initMap函數。如果我們進一步分解代碼，我們將使用一個ID為map的空div來聲明要渲染該地圖的位置。
讓地圖；
函數initMap（）{
map = new google.maps.Map（document.getElementById（’map’），{
中央： {
緯度：51.513329，
lng：-0.088950
}，
變焦：14
}）;
}
在我們的JavaScript中，首先，我們在函數外部設置了一個map變數，因此它是全局範圍的一部分，以便我們以後可以修改map。在我們的initMap函數中，我們首先聲明一個新的Google Map，並通過調用具有map ID的元素將其設置為呈現。之後，我們指定選項，即地圖的中心和縮放級別。
我們將倫敦市中心的歷史地標倫敦市的坐標用作地圖中心。稍後，我們將討論如何使用Maps API查找地圖上任何位置的坐標。但是現在，如果您好奇的話，可以使用latlong.net快速查找任何地址的坐標。
地圖類型
現在我們已經有了基本的地圖，我們可以看看Google Maps JavaScript API為我們提供的自定義選項。我們將要使用的第一個選項是地圖類型。 Google地圖支持四種類型的地圖，分別是：
- 路線圖：通常看到的默認地圖。
- 衛星：可用的Google地圖和Google地球的衛星視圖。
- 混合：路線圖和衛星視圖的混合體。
- 地形：基於地形信息的地圖，例如山脈和山谷。
在地圖選項中，我們可以添加mapType屬性以選擇所需的視圖，如下所示：
map = new google.maps.Map（document.getElementById（’map’），{
中央： {
緯度：51.513329，
lng：-0.08895
}，
變焦：14
mapTypeId：’混合’
}）;
對於我們的示例，我們使用混合地圖。您可以嘗試不同的類型，以查看哪種類型適合您的用例。
地圖選項
在輸入地圖類型之後，我們來介紹地圖控制項。 Google Maps允許您在地圖中使用其六個控制項中的任何一個。您可以在其網站上找到控制項列表。
您可以根據需要指定要使用的控制項及其位置，如下所示：
map = new google.maps.Map（document.getElementById（’map’），{
中央： {
緯度：51.513329，
lng：-0.08895
}，
變焦：14
mapTypeId：’hybrid’，
scaleControl：true，
fullscreenControlOptions：{
位置：google.maps.ControlPosition.RIGHT_BOTTOM
}，
}）;
我們啟用scaleControl，該控制項將地圖的比例尺聲明為TRUE，並在底部顯示Google的版權。在下一行中，我們使用fullscreenControlOptions屬性將fullscreenControl的外觀從其默認的右上位置更改為右下位置。同樣，您可以調整其他控制項的位置。
想要一個控制項執行除內置控制項以外的其他操作嗎？不用擔心，Google Maps還允許您為地圖創建自定義控制項。
讓我們來談談標記！
添加標記
標記是驚人的，它們使使用地圖構建許多互動式應用程序成為可能。例如，某些酒店預訂網站使用標記在地圖上向您顯示酒店的位置。而且它們也很容易添加。
讓我們使用以下代碼向倫敦橋添加一個標記：
讓marker = new google.maps.Marker（{
職位：{
緯度：51.506821，
lng：-0.0879
}，
地圖：
標題：「倫敦橋」
}）;
正如您在上面看到的，標記的代碼具有三個屬性。第一個是坐標。之後，我們傳遞map變數，該變數在開始時存儲我們的地圖，最後傳遞我們標記的標題。
您還可以在上述代碼塊中將該URL傳遞給具有icon屬性的自定義標記圖標。
添加一個信息窗口
您可能會發現我們的標記中缺少某些內容。通常，當您單擊地圖上的標記時，它會顯示一個彈出窗口，其中包含更多詳細信息。該彈出窗口本身就是一個不同的組件，稱為InfoWindow。
帶有自定義標記的Google地圖。
對我們來說幸運的是，將InfoWindow附加到我們的標記非常容易。
讓infoWindow = new google.maps.InfoWindow（{
內容：
倫敦大橋
‘
}）;
marker.addListener（’click’，function（）{
infoWindow.open（map，marker）;
}）;
首先，我們創建一個新的infoWindow變數來存儲我們的InfoWindow組件。我們僅向其傳遞內容的屬性，該屬性包含單擊後顯示的HTML。之後，我們在標記上添加了一個單擊事件偵聽器，該事件偵聽器告訴它在單擊標記時打開infoWindow。
這樣，您可以使用標記和infoWindow來創建與地圖的互動式體驗。
現在是暫停片刻並回顧我們取得的進展的合適時機。僅用30行代碼，我們就使用Google Maps JavaScript API來構建帶有標記和信息框的自定義地圖。值得注意的是，使用Google Maps的API進行對於初學者來說似乎具有挑戰性的事情是多麼容易。
動態修改和事件監聽器
標記和地圖選項不一定是任何人拋棄預製的Google Map插件並切換到API的原因。它們很有前途，但是很多插件已經提供了這些功能。讓我們嘗試一下插件無法實現的功能。
動態修改
Google Maps有很多方法可以與地圖進行交互並修改其行為。如果您習慣使用DOM，那麼使用這些方法應該不會有太多麻煩。
這些方法中的某些方法使您可以從地圖中獲取信息，例如getCenter，它返回地圖的中心坐標。同樣，有些允許您更改行為，例如setCenter，它可以更改地圖的中心。
有很多方法，您應該先看看所有這些方法，以便了解API可以實現的功能。讓我們在地圖中使用其中一種方法。
我們可以在示例中添加一個按鈕，使我們的地圖中心回到倫敦市。
首先，我們需要在代碼中添加一個按鈕：
現在，我們將事件偵聽器附加到觸發setCenter方法的按鈕上：
const centerButton = document.querySelector（’#bringToCenter’）;
centerButton.addEventListener（’click’，function（e）{
e.preventDefault（）;
map.setCenter（{
緯度：51.513329，
lng：-0.08895
}）;
}）;
就是這樣。簡單吧？我們使用了map.setCenter，其中map是我們在開始時聲明的用於保存地圖的變數。
您應該嘗試嘗試不同的方法，並探索API的局限性。
事件監聽器
JavaScript開發人員可能熟悉的另一個概念是事件偵聽器。您可以將操作附加到特定事件，這意味著當發生事件（例如更改中心）時，將觸發這些操作。
讓我們以Google Maps文檔中的一個示例為例，該示例在您單擊地圖的任意位置時獲取地圖的坐標。
讓infoWindowLatLang;
map.addListener（’click’，function（mapsMouseEvent）{
如果（infoWindowLatLang）infoWindowLatLang.close（）;
infoWindowLatLang =新的google.maps.InfoWindow（{
位置：mapsMouseEvent.latLng
}）;
infoWindowLatLang.setContent（mapsMouseEvent.latLng.toString（））;
infoWindowLatLang.open（map）;
}）;
如您所見，該概念與JavaScript中事件監聽器的工作原理幾乎相同。首先，我們將onClick事件偵聽器附加到我們的地圖。在事件監聽器中，我們獲取用戶單擊位置的坐標，並將其放置在InfoWindow中。
如果您查看Otter的Google Map塊，則可以看到我們如何使用這些事件偵聽器和方法來完成諸如添加和拖放Markers以及通過單擊滑鼠來刪除Marker之類的操作。
創建一個自定義控制項
最後，我們以為您的Google Maps構建自定義控制項的示例結束本文。
如前所述，我們正在構建一個自定義按鈕，該按鈕將標記添加到地圖中心。儘管此代碼看起來有些複雜，但是卻很簡單。
首先，我們構建一個按鈕作為其功能，它具有一個事件偵聽器，可將標記添加到地圖的中心。
您需要將上述代碼塊中的YOUR_API_KEY替換為您的API密鑰。它以給定的緯度和經度為中心繪製一個簡單的Google地圖。
函數MarkerControl（controlDiv，map）{
const controlUI = document.createElement（’div’）;
controlUI.style.backgroundColor =’#fff’;
controlUI.style.border =’2px實心#fff’;
controlUI.style.borderRadius =’3px’;
controlUI.style.boxShadow =’0 2px 6px rgba（0,0,0，.3）’;
controlUI.style.cursor =’指針’;
controlUI.style.margin =’10px’;
controlDiv.appendChild（controlUI）;
const controlText = document.createElement（’img’）;
controlText.style.padding =’5px’;
controlText.title =’單擊以添加標記’;
controlText.src =’https://maps.google.com/mapfiles/ms/icons/red-pushpin.png’;
controlUI.appendChild（controlText）;
controlUI.addEventListener（’click’，function（）{
新的google.maps.Marker（{
位置：map.getCenter（），
地圖：地圖
}）;
}）;
}
上面的大多數代碼只是為我們的按鈕創建一個元素。最後，我們將事件偵聽器附加到按鈕上，該按鈕將標記添加到地圖的中心。
現在，我們必須將按鈕附加到地圖上，這需要使用以下代碼：
const markerControlDiv = document.createElement（’div’）;
const markerControl = new MarkerControl（markerControlDiv，map）;
markerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push（markerControlDiv）;
上面的代碼將我們的按鈕附加到地圖的左下方。就是這樣。這就是使用其JavaScript API向Google Maps添加自定義控制項所需要的全部。
帶有左下角的自定義按鈕的Google地圖。
到頂部
結論
我們在本文中所做的所有工作的有效示例均可在CodeSandbox上在線獲得。
這就是本文的內容，我希望它使您對使用Google Maps JavaScript API有信心。它非常易於使用，並且可以讓您用地圖構建幾乎任何想要的東西！
現在，您應該嘗試使用今天學到的知識並通過使用Google Maps自己構建一個演示項目來實踐它。如果您有任何疑問，請在評論中告知我們；我們很高興為您解答！
…
別忘了加入我們的速成班，以加快WordPress網站的速度。通過一些簡單的修復，您甚至可以減少50-80％的載入時間：
Karol K的布局和演示。