[Google Maps]如何隱藏 Google 地圖上所有的地標、路名、餐廳等文字標籤圖層,產生一張純粹的地圖

How to hide Labels on Google Maps
如何隱藏 Google 地圖的文字標籤

朋友跟我說,這幾天忙著製作一份會議用的簡報,裡面需要幾份地圖,但要的是一張純淨沒有任何文字標籤的地圖,但是奮戰了好久,就是找不到這樣的圖資,所以問我有沒有什麼辦法可以去除或是隱藏 Google Maps 上所有的文字標籤呢?
像是去除掉地圖上的路名、地標什麼的,還有那些餐廳啦、商家名稱等等的文字標籤。
不然就真的要請公司的美術同仁用 Photoshop 來後製這些地圖了 T_T


記得印象中,以前使用 Google Maps 的時候,Google 地圖是有顯示/隱藏各種不同標籤圖層的功能。
像是地標、餐廳名稱、街道名稱等等的圖層,都可以個別切換為隱藏或顯示,但是現在這個功能不知道為什麼都沒有了。
目前只有在顯示『衛星』圖資的時候,才有這個選項:已啟用標籤/已停用標籤。
可惜僅限於衛星模式,一般地圖模式就無法這麼切換。


用 Photoshop 來去除地圖上的文字標籤,我想應該是沒有任何問題,就是很費時傷眼,有耐心有時間又有好眼力的話,用 PS 來後製也是一個選項(美術同仁表示:.....)。


不過....難道沒有其他更快速的方法可以隱藏掉 Google Maps 上的文字標籤嗎?


有。方法來了。而且一次給你兩種方式。
第一個方法是使用 Google Drive 的我的地圖,這個方法方便簡單,但是不能完全去掉所有的文字標籤(可以隱藏大部分的標籤)。
第二個方法是採用修改 Google 地圖的 CSS 樣式,這樣可以完全隱藏所有的文字和標籤,可是方法就有點困難。
依據大家實際的需求,看看哪個方案比較適合你囉。


1. 使用 Google Drive 的『我的地圖』功能


第一個方法(簡單方案),就是直接使用 Google Maps 提供的『我的地圖』功能,在這個功能中,就可以將地圖顯示為沒有任何文字標籤的模式。


作法如下:

  • 登入你的Google帳號,然後開啟 Google 雲端硬碟(Google Drive)。
     
  • 在 Google Drive 的側邊選單上方,那個 + 新增的按鈕,按下去,就會出現新增文件、試算表等等的常用功能,在這些功能項目的最下面,會有一個『更多』的選項,滑鼠移過去,就會出現一個子選單,裡面有一個『我的地圖』。
     
    在 Google Drive 新增『我的地圖』
    在 Google Drive 新增『我的地圖』

  • 點選我的地圖。
     
  • 進入我的地圖之後,先搜尋你要製作的地點,然後把地點加入。
     
  • 接下來就是看他的選單中,有一個『基本地圖』的項目,在這個項目中,Google預設了不同的地圖範本模式,如果要去除標籤,就點選『黑白城市地圖』、『淡色政治區域圖』或是『淡色景觀地圖』這兩項。
     
    三種相對乾淨的地圖模式
    三種相對乾淨的地圖模式

  • 切換到上述這三種地圖範本後,就會發現絕大部分的文字標籤已經去除了。

這是得到一張乾淨地圖最快的方法,但是還是有一些讓人遺憾的地方。


以第一、第二個範本『黑白城市地圖』和『淡色政治區域圖』來說,它仍然還是會保有最基本的文字標籤(雖然已經幾乎沒有了)。


第三個範本『淡色景觀地圖』,則是完全沒有文字標籤,但是也少了很多街道劃分的細節,看起來都不知道哪裡是哪裡了。


如果這樣的版本還是無法達到你的要求,那麼我們就要來進行第二個方法了。


2. 用 CSS 來完全隱藏/停用 Google Maps 上預設的文字標籤


但是這個第二種方法可就跟上面的方法不同了。
不是點點滑鼠,三兩下就可以搞定的技巧,會有一些門檻,但總是一個方法 XD
怎麼做呢?
我們一樣是一步一步來:

  • 開啟 Chrome 的瀏覽器(Safari也可以,但是其他的瀏覽器就沒試過了)。
     
  • 進入 Google Maps,然後前往你要查看的地圖區域(在我們這次的個案中,是以台北101附近為例子)。
     
  • 然後在 Google Maps 側邊欄(選單),切換到『衛星』模式
     
  • 進入衛星模式之後,就會看到有多兩個功能:
    1. 已啟用標籤。
    2. 3D已開啟。

    衛星模式會多兩個功能選項
    衛星模式會多兩個功能選項

     
  • 點選第一個功能:『已啟用標籤』,接著這個選項就會變成『已停用標籤』,再點選一次,讓他回到『已啟用標籤』。
     
  • 接著有門檻的來了喔:在 Chrome 功能表上,點選『檢視』>『開發人員選項』>『開發人員工具』。
     
  • 在開發人員工具的面板上,點選原始碼下方的『HTML』標籤。
     
  • 然後按下 Command + F(⌘+F/搜尋)。
     
  • 在搜尋欄中,打入:『已啟用標籤』
     
  • 接著在原始碼的地方會跳到『已啟用標籤』這個 HTML 語法的段落,把這個段落後面的 style="display:none" 中的 display:none 刪除
    然後別離開,在這個段落下方,有另一個『已停用標籤』的HTML 原始碼,一樣把這個原始碼後方的 display:none 刪除。
     
    在開發人員工具中,搜尋『已啟用標籤』
    在開發人員工具中,搜尋『已啟用標籤』

  • 然後回到地圖側邊欄,切換回『地圖模式』,並且保持這個側邊欄顯示
    正常來說,點選了『地圖』模式之後,側邊欄會自動縮起來,這時候再把他打開讓他顯示,這個步驟很重要,側邊欄必須要顯示在網頁上,下一個步驟才能進行。
     
  • 回到開發者工具那邊,在剛剛的『已啟用標籤』、『已停用標籤』的原始碼往上找,有一個 Button 的段落(就是這兩個字串的上層按鈕),這個段落也會自動多出一個『style="display:none"』,把他刪除。
     
    刪除 display:none的樣式語法
    刪除 display:none的樣式語法

  • 回來看地圖,側邊欄的『衛星』模式下方,就會出現『已啟用標籤』和『已停用標籤』這兩個功能(之前只要切換到地圖模式就會看不到)。
     
    在地圖模式中,也可以停用標籤了
    在地圖模式中,也可以停用標籤了

  • 點選『已停用標籤』,OK,地圖上的所有標籤就隱藏了。

成功停用地圖上的文字標籤
成功的停用了Google Maps上的預設標籤了

隱藏 Google 地圖文字標籤的原理


這個小技法的原理,是利用CSS的顯示與隱藏的語法:display:none|block來做切換。
因為『啟用標籤』和『停用標籤』這兩個功能,原本 Google Maps 就已經設計在系統裡了。
只是限定在『衛星模式』時,這兩個功能的按鈕才會『出現』,但是不管有沒有在網頁上顯示這兩個按鈕,功能其實都是在的。


所以上面的方法就是讓切換回『地圖模式』時,讓這兩個按鈕不要隱藏,只要能秀在側邊欄,那麼就可以使用這個功能了。
 
試試看吧 ^^