Google Map 教學 – 網站嵌入 Google 地圖及我的地圖操作方法

Google Map 教學 – 網站嵌入 Google 地圖及我的地圖操作方法教學目的:

1.Google Map 將地圖查詢結果嵌入網站方法

2.自訂 Google 我的地圖並嵌入網站

Google Map 是現下最好用的地圖應用程式,在建立網站時幾乎是必備的功能,同時也結合了 Google 帳戶中的設定,比如說在地商家、Google 日曆等,在路線規劃的精準上也不是一般市面上的導航軟體可以比擬的,但要如何在網站中加入 Google Map 讓訪客可以透過地圖功能快速找到商家位置呢?

在本篇教學中會教導大家如何在 Google 地圖中找到 HTML 的 iframe 代碼,簡單的為網站置入商家位置指引地圖。另外也會介紹到 Google 我的地圖,這個功能是可以自訂一份地圖,加入路線或者標註多個產品經銷句點,製作與網站內容相契合的 專屬 Google 地圖。

Google 地圖:Google Map

Google 我的地圖:https://www.google.com/intl/zh-TW/maps/about/mymaps/

Google 官方我的地圖說明文件:https://support.google.com/mymaps/#topic=3024924

(小提醒:本次教學將著重於如何嵌入地圖以及設定方式,詳細製作地圖的方法請參考上方提供的官方說明文件,在之後也會推出相關教學)

• 在網頁上嵌入 Google 地圖

第一步:進入到 Google Map 中,輸入地址或公司名稱做查詢,如果要以公司名稱查詢,必須要建立 Google 在地商家資料才能夠查詢到。

Google Map 教學

 

第二步:定位完成後,點選左上久的選單圖示。

Google Map 教學

 

第三步:找到分享或嵌入地圖的選項。

Google Map 教學

 

第四步:點選嵌入地圖的標籤,會看到以 iframe 為開頭的 HTML 程式碼,點選複製 HTML 

Google Map 教學

 

第五步:在 WordPress 編輯器中貼上代碼,下圖中紅色標示的位置是可以自訂 Google 地圖的寬度與高度,可以視網站版型來設定,由於筆者是以示範為主,因此直接在頁面中貼上代碼,但在網站製作實務上 Google Map 通常都會與聯絡我們的資訊一起擺放,由於不同的 WordPress 主題都使用不同的頁面編輯器,在此無法一一介紹,但只需要把握一個原則,在你所使用的主題頁面編輯器中找出插入 HTML 代碼的小工具,再貼上 Google Map 上複製的 HTML 程式碼,就能完成 Google 地圖嵌入。類似的做法可以在 WordPress 後台的外觀→小工具 在左邊的小工具區塊中找到名稱為文字或自訂 HTML 的小工具區塊做練習,相關做法可以參考:WordPress 教學 基礎介紹五(外觀)

Google Map 教學

 

第六步:回到前台就能看到剛剛嵌入的 Google 地圖,另外有兩個需要注意的小事項跟大家分享。

第一:在輸入地址時最好不要包含樓層,如果輸入樓層在左上角的地址會顯示樓層數字,正確的地址反而不會完整顯示 。

第二:在複製地圖代碼時可以預先設定地圖大小,如果説怕更改地圖代碼會導致 Google 地圖不能夠正常顯示,那麼就可以在複製代碼前先行調整大小,位置就在代碼欄位的前端顯示一個 “中” 的按鈕,點下去就可以選擇小、中、大、自訂大小。

Google Map 教學

 

下方就是 Google 地圖嵌入的實例

 

•  Google 我的地圖設定及置入網站

第一步:進入我的地圖網站,點擊開始使用後接者點擊左上角的建立新地圖。

Google Map 教學

Google Map 教學

 

第二步:在左上方的控制區域中點選新增圖層。

Google Map 教學

 

點選標題後可以自行命名此圖層。

Google Map 教學

 

第三步:筆者根據 Google 我的地圖官方說明文件自訂兩個位置,分別使用搜尋功能定位後在目標地點上更換圖標與顏色(1),接者在搜尋欄下方的功能列使用路線規劃的按鈕,將從台北車站至鵠崙設計的行車路現標示出來(2),由於操作起來並不困難,又有 Google 官方說明文件,因此就不再贅述。要跟大家講的重點在於如何將製作好的地圖正確顯示在網頁中,點選標註 3 的分享按鈕。

Google Map 教學

 

第四步:我的地圖存取權預設都是私人,因此要嵌入到網頁中供網站訪客瀏覽,必須要變更存取權限,在下方標註的欄位點選右下角的變更。

Google Map 教學

 

第五步:接下來的選單中點擊開啟-公開在網路上,然後儲存。

Google Map 教學

 

第六步:變更好後會顯示下圖畫面,點選完成

Google Map 教學

 

第七步:接下在左上角的控制中心點選右上角三個點的位置,在跳出的選單中可以找到 設為預設檢視畫面 這個項目,意思就當瀏覽者在網站上觀看此張地圖顯示的樣式,可以透過縮放功能將地圖調整到適當畫面後,點選這個項目,Google 地圖就會自動在網站上顯示當前畫面。

Google Map 教學

 

第八步:接下來的步驟與第一小節介紹的相同,複製 HTML 代碼並貼到文字編輯器中。

Google Map 教學

Google Map 教學

 

第九步:下圖就是完成後的地圖樣式,在點選右上角的圖示後會顯示剛剛製作的地點與行車路線,是不是非常具有特色且方便呢?

Google Map 教學

 

下方是嵌入我的地圖實際在網頁上顯示的樣式,點擊左上角的圖案會顯示詳細路線資訊

 

結語:

Google Map 其實可以有很多變化,在嵌入地圖這部分是比較基本的做法,在後續的 Google Map 相關教學文章中也會提到如何自訂 Google 地圖外觀,可以與網站樣式更加符合,以及 Google Map API 申請流程等,所有與 Google 地圖相關的問題,都可以在這一系列獲得解決。

今天的教學到這裡告一段落了,不要忘記在右邊訂閱鵠學苑電子報,並持續關注鵠學苑的最新文章,想學習超詳細的WordPress攻略嗎??來 鵠學院 就對了!我們下次的教學見~

Google 相關教學文章:

Google地圖無法顯示,出現浮水印? 申請 API 帳單資料流程教學

Google Map 自訂外觀 – 客製化 Google 地圖樣式教學

Google Maps JavaScript API 申請 – 網站啟用 Google 地圖 教學

Google AdSense 教學 – AdSense申請在 WordPress 加入網站廣告

Google網站管理員 ( Search Console ) 驗證網站所有權的三種方式

Google reCAPTCHA 教學 我不是機器人 驗證按鈕 架站必學技能

[ 跳過recaptcha 驗證 ] – Google Invisible reCAPTCHA 隱形驗證碼 教學

使用 Google 自訂搜尋引擎取代WordPress站內搜尋步驟教學

Google 字體下載 – WordPress 字體快速分析及網頁字體設定

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁 必學技能!

Google Page Speed Insight 網站速度測試

分享在 facebook
Facebook
分享在 google
Google+
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top