如何將 Google Map 地圖嵌入網頁? WordPress 實作方式大公開

分享

基本上我想人手一機的時代,出外到陌生的地方靠 Google Map 導航是很常見的,所以現在的網站服務無論是官方網站介紹、個人部落格的旅遊景點分享、食記等等…都脫離不了地點位置的使用,在每個人都在介紹資訊解決使用者問題時,若你能貼心的提供 Google 地圖連結,不但更貼心而且使用者也可以在讀完受用的資訊後直接點選前往他想要的目的地啦!

在網路上的教學大多都是以 WordPress 簡單步驟帶過,我也會用一樣的方式 XD,但其實原理相通,即使不透過 WordPress,在你的一般網站上也能藉由操作網頁程式碼的方式達到將 Google 地圖內嵌的效果。

取得 Google Maps 原始碼的方式

打開 Google 地圖 後隨意搜尋一個你想前往的地方,假設是內湖區的白石湖吊橋。

點選「白石湖吊橋」後,點擊最左上角的「選單」,點擊「分享或嵌入地圖」。

這時會跳出分享視窗,點選「嵌入地圖」,這時只要複製HTML後貼到網站就完成啦,但我們還是一步一步來 XD

此功能還可以調整地圖的大小,分為小、中、大、自訂大小等,確認後點擊「複製 HTML」。

HTML 是什麼?理解網頁原理與 iframe

首先,HTML全名為HyperText Markup Language(超文本標記語言),建立網頁的標記語言,也就是所有的網頁都是透過 HTML 組成,由於瀏覽器可以讀取 HTML 檔案,這就是浩大網路中各個網站的最最最基本原理啦。

那 HTML 長怎麼樣呢?很簡單,你只要馬上按下「F12」,看到很多密密麻麻的原始碼,其中有個「Elements」,在裡頭會看到由<!DOCTYPE html>為開頭,下一行是<html …>的東西,那整份網頁就是由<html></html>所包起來的範圍組合而成,這就是基礎 HTML 的知識了。

那回過頭來了解剛剛從 Google Maps 裡的「複製 HTML」,得到的原始碼如下:

<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3613.0843272120196!2d121.58541421537959!3d25.09900664183558!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1z55m955-z5rmW5ZCK5qmL!5e0!3m2!1szh-TW!2stw!4v1647872644116!5m2!1szh-TW!2stw" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

會覺得跟上面的 html 有點像,差異是在他是由 <iframe> </iframe> 所包起來的東西,那從英文也可以約略猜到,width=”800″是寬度,height=”600″是高度,也就是對應剛剛小、中、大、自訂大小。

iframe 叫做內嵌框架,運用的技術就是把一個 HTML 網頁放進另外一個 HTML網頁

iframe 標籤會有一些基礎的屬性,如 src 表示指定要被嵌入的網頁(html),height: 指定 iframe 的高度,單位為像素 (pixel),width: 指定 iframe 的寬度,單位為像素 (pixel),以上說明就對上面複製出來的原始碼,有一定的認識啦。

透過 WordPress 將 iframe 程式碼內嵌

由於我們知道每一個網頁都是透過 HTML 組成,也知道現在正在打的文章也是一篇 HTML,那我們想要把 Google 地圖放進這篇文章該如何做呢?WordPress提供相當便利的方式,只要點擊最右上方的三個點點,點選「程式碼編輯器」,或是直接快捷鍵「Ctrl + Shift + Alt + M」即可。

切換後會發現畫面變得稍微「陽春」了點,多了很多程式碼,但又跟剛剛上面講的標籤很像,這就是 WordPress 幫你在背後處理的事情啦。

那我們只要將剛剛複製出來的 HTML,貼在我們想要的位置即可。

這下面就是 Google 地圖的顯示位置。

這時切回「視覺化編輯器」,其實就看的一清二楚囉,也可以直接預覽試試看。

以上就是在眾多網站中,將 Google 地圖嵌入網頁的原理與方式,這樣即使是使用別的網站,只要你能操控 HTML 程式碼,也能做到一樣的事情!

快速將 Google Maps 嵌入網頁懶人包

點選 Google 地圖左上角選單,點擊「分享或嵌入地圖」,再點擊「嵌入地圖」中的「複製 HTML」,將他放在你想呈現的 HTML 區塊中,就大功告成!

分享
Scroll to Top