[Google Maps]如何隱藏Google 地圖上所有的地標、路名

2. 用CSS 來完全隱藏/停用Google Maps 上預設的文字標籤 · 開啟Chrome 的瀏覽器(Safari也可以，但是其他的瀏覽器就沒試過了)。

· 進入Google Maps， · 然後按 ... 首頁[how]其實可以這樣做[App]應用應用[info]或許有興趣知道 iOSMacOSHTML5CSS3CloudAffinityPhoto,Photoshop amigo! cassandre chiron marmalade sweetdumpling Tahini ‹‹Gmail收Gmail或是搬家轉移到另一個Gmail帳號一直失敗？先檢查一下這些步驟[GoogleMaps]奇怪，Google地圖導航的藍色箭頭方向消失了，我又動到什麼啦？››Home››[how]其實可以這樣做››雲端好服務 [GoogleMaps]如何隱藏Google地圖上所有的地標、路名、餐廳等文字標籤圖層，產生一張純粹的地圖 如何隱藏Google地圖的文字標籤 朋友跟我說，這幾天忙著製作一份會議用的簡報，裡面需要幾份地圖，但要的是一張純淨沒有任何文字標籤的地圖，但是奮戰了好久，就是找不到這樣的圖資，所以問我有沒有什麼辦法可以去除或是隱藏GoogleMaps上所有的文字標籤呢？ 像是去除掉地圖上的路名、地標什麼的，還有那些餐廳啦、商家名稱等等的文字標籤。

不然就真的要請公司的美術同仁用Photoshop來後製這些地圖了T_T 記得印象中，以前使用GoogleMaps的時候，Google地圖是有顯示/隱藏各種不同標籤圖層的功能。

像是地標、餐廳名稱、街道名稱等等的圖層，都可以個別切換為隱藏或顯示，但是現在這個功能不知道為什麼都沒有了。

目前只有在顯示『衛星』圖資的時候，才有這個選項：已啟用標籤/已停用標籤。

可惜僅限於衛星模式，一般地圖模式就無法這麼切換。

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

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

方法來了。

而且一次給你兩種方式。

第一個方法是使用GoogleDrive的我的地圖，這個方法方便簡單，但是不能完全去掉所有的文字標籤(可以隱藏大部分的標籤)。

第二個方法是採用修改Google地圖的CSS樣式，這樣可以完全隱藏所有的文字和標籤，可是方法就有點困難。

依據大家實際的需求，看看哪個方案比較適合你囉。

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

作法如下：登入你的Google帳號，然後開啟Google雲端硬碟(GoogleDrive)。

  在GoogleDrive的側邊選單上方，那個+新增的按鈕，按下去，就會出現新增文件、試算表等等的常用功能，在這些功能項目的最下面，會有一個『更多』的選項，滑鼠移過去，就會出現一個子選單，裡面有一個『我的地圖』。

  在GoogleDrive新增『我的地圖』 點選我的地圖。

  進入我的地圖之後，先搜尋你要製作的地點，然後把地點加入。

  接下來就是看他的選單中，有一個『基本地圖』的項目，在這個項目中，Google預設了不同的地圖範本模式，如果要去除標籤，就點選『黑白城市地圖』、『淡色政治區域圖』或是『淡色景觀地圖』這兩項。

  三種相對乾淨的地圖模式 切換到上述這三種地圖範本後，就會發現絕大部分的文字標籤已經去除了。

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

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

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

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

2.用CSS來完全隱藏/停用GoogleMaps上預設的文字標籤 但是這個第二種方法可就跟上面的方法不同了。

不是點點滑鼠，三兩下就可以搞定的技巧，會有一些門檻，但總是一個方法XD 怎麼做呢？ 我們一樣是一步一步來：開啟Chrome的瀏覽器(Safari也可以，但是其他的瀏覽器就沒試過了)。

  進入GoogleMaps，然後前往你要查看的地圖區域(在我們這次的個案中，是以台北101附近為例子)。

  然後在GoogleMaps側邊欄(選單)，切換到『衛星』模式。

  進入衛星模式之後，就會看到有多兩個功能：已啟用標籤。

3D已開啟。

衛星模式會多兩個功能選項   點選第一個功能：『已啟用標籤』，接著這個選項就會變成『已停用標籤』，再點選一次，讓他回到『已啟用標籤』。

  接著有門檻的來了喔：在Chrome功能表上，點選『檢視』>『開發人員選項』>『開發人員工具』。

  在開發人員工具的面板上，點選原始碼下方的『HTML』標籤。

  然後按下Command+F(⌘+F/搜尋)。

  在搜尋欄中，打入：『已啟用標籤』。

  接著在原始碼的地方會跳到『已啟用標籤』這個HTML語法的段落，把這個段落後面的style="display:none"中的display:none刪除。

然後別離開，在這個段落下方，有另一個『已停用標籤』的HTML原始碼，一樣把這個原始碼後方的display:none刪除。

  在開發人員工具中，搜尋『已啟用標籤』 然後回到地圖側邊欄，切換回『地圖模式』，並且保持這個側邊欄顯示。

正常來說，點選了『地圖』模式之後，側邊欄會自動縮起來，這時候再把他打開讓他顯示，這個步驟很重要，側邊欄必須要顯示在網頁上，下一個步驟才能進行。

  回到開發者工具那邊，在剛剛的『已啟用標籤』、『已停用標籤』的原始碼往上找，有一個Button的段落(就是這兩個字串的上層按鈕)，這個段落也會自動多出一個『style="display:none"』，把他刪除。

  刪除display:none的樣式語法 回來看地圖，側邊欄的『衛星』模式下方，就會出現『已啟用標籤』和『已停用標籤』這兩個功能(之前只要切換到地圖模式就會看不到)。

  在地圖模式中，也可以停用標籤了 點選『已停用標籤』，OK，地圖上的所有標籤就隱藏了。

成功的停用了GoogleMaps上的預設標籤了 隱藏Google地圖文字標籤的原理 這個小技法的原理，是利用CSS的顯示與隱藏的語法:display:none|block來做切換。

因為『啟用標籤』和『停用標籤』這兩個功能，原本GoogleMaps就已經設計在系統裡了。

只是限定在『衛星模式』時，這兩個功能的按鈕才會『出現』，但是不管有沒有在網頁上顯示這兩個按鈕，功能其實都是在的。

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

  試試看吧^^ 我們也有臉書專頁了，歡迎大家按讚加入喔：@5min.reading GoogleMapsCSS 延伸閱讀:更多相關的主題文章[CSS:counter(line)]如何用CSS來顯示區塊裡的序列行數[RWD]iPhoneX以及8,8+等各代機種的螢幕尺寸解析度與CSS語法對照表[CSS3]如何用CSS來改變Placeholder這個屬性的文字顏色[CSS3]如何重新定義HTML中換行標籤BR的樣式或是直接把BR的行距高度移除[GoogleMaps]奇怪，Google地圖導航的藍色箭頭方向消失了，我又動到什麼啦？[CSS]網頁用的尺寸單位:PX跟EM怎麼區分呀？等等，還有一個REM...[CSS3:Word-Break]用CSS來設置中英文的文字斷行樣式[CSS]如何讓別人無法列印你的網頁，簡單一行CSS搞定[RWD]用Javascript來偵測是否為行動裝置最簡單的方法[CSS]Clippy:快速幫你製作CSSClip-Path圖片變形的雲端工具 ‹‹Gmail收Gmail或是搬家轉移到另一個Gmail帳號一直失敗？先檢查一下這些步驟[GoogleMaps]奇怪，Google地圖導航的藍色箭頭方向消失了，我又動到什麼啦？››