【Googleマップ】上部のバー(レストラン、ホテルなど)を非表示にするCSS
PCウェブサイト版「Googleマップ」を開くと、上部に以下のようなジャンルボタンが表示されます。
- レストラン
- ホテル
- アクティビティ
- 美術館、博物館
- 交通機関
- 薬局
- ATM

僕からしたらどのボタンも使っていないので、単に貴重な画面のスペースを占めている邪魔コンテンツです。
CSSを利用することでバーごと非表示にできます。消すことで見た目がスッキリします。いつでもオンオフできます。自分だけの反映で他人のデバイスには一切影響しないので、変な心配せず利用できると思います。
本記事はChrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。
前提
「Stylebot」や「Stylus」などのCSSを適用できる拡張機能を既に導入している前提です。
Googleマップの上部にある各種ボタンを非表示にするCSS
スタイルシートを開く
「Googleマップ」にアクセスします。インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

本来はGoogleマップのページ上(www.google.com/maps
)だけで動作するスタイルシートを作成するのが一番ですが、本記事では省略します。こだわりたい方はこちらの記事に方法を書いています。
右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。
下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。
CSSを書き込む
以下のコードになります。
/*上部のレストラン、ホテル、交通機関などのバー非表示*/
div#assistive-chips:has([aria-label="この付近で利用できる検索オプション"]) {
display: none !important;
}
本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、登録したサイト(例:www.google.com
)がオンになっていることを確認します。オンになっている間は有効になっているということです。
消えたか確認
CSSを書き込んだ時から瞬時に非表示になります。些細なことと言えばそうですが、ほんの少しだけ画面がスッキリします。

一時的に無効化したい場合は、拡張機能メニュー内にある「Stylebot」アイコンを左クリック→「www.google.com
」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
感想
以上、PCウェブサイト版「Googleマップ」で上部に表示されるレストラン、ホテル、アクティビティ、美術館、交通機関などの各種ボタンを非表示にするCSSでした。
不快なクチコミを投稿しまくっているユーザーを非表示にする記事も書いています。
ディスカッション
コメント一覧
まだ、コメントがありません