広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

【Googleマップ】上部のバー(レストラン、ホテルなど)を非表示にするCSS

Google

Googleマップのアイコン画像

この記事では、PCウェブサイト版「Googleマップ」で上部に表示されるレストラン、ホテル、アクティビティ、美術館、交通機関などの各種ボタンを非表示にするCSSを書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebotスタイルボット」や「Stylusスタイラス」を利用します。

【Googleマップ】上部のバー(レストラン、ホテルなど)を非表示にするCSS

PCウェブサイト版「Googleマップ」を開くと、上部に以下のようなジャンルボタンが表示されます。

  • レストラン
  • ホテル
  • アクティビティ
  • 美術館、博物館
  • 交通機関
  • 薬局
  • ATM
PC版Googleマップ上部にある各種ボタン画像

僕からしたらどのボタンも使っていないので、単に貴重な画面のスペースをめている邪魔コンテンツです。

CSSを利用することでバーごと非表示にできます。消すことで見た目がスッキリします。いつでもオンオフできます。自分だけの反映で他人のデバイスには一切影響しないので、変な心配せず利用できると思います。

本記事はChrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。

前提

Stylebot」や「Stylus」などのCSSを適用できる拡張機能を既に導入している前提です。

Googleマップの上部にある各種ボタンを非表示にするCSS

スタイルシートを開く

Googleマップ」にアクセスします。インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

「Stylebot」拡張機能のスクリーンショット1

本来はGoogleマップのページ上(www.google.com/maps)だけで動作するスタイルシートを作成するのが一番ですが、本記事では省略します。こだわりたい方はこちらの記事に方法を書いています。

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。

下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。

CSSを書き込む

以下のコードになります。

/*上部のレストラン、ホテル、交通機関などのバー非表示*/
div#assistive-chips:has([aria-label="この付近で利用できる検索オプション"]) {
    display: none  !important;
}
注意事項

本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

「Stylebot」拡張機能のスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト(例:www.google.com)がオンになっていることを確認します。オンになっている間は有効になっているということです。

消えたか確認

CSSを書き込んだ時から瞬時に非表示になります。些細ささいなことと言えばそうですが、ほんの少しだけ画面がスッキリします。

PC版Googleマップ上部の各種ボタンをCSSで非表示にした画像

一時的に無効化したい場合は、拡張機能メニュー内にある「Stylebot」アイコンを左クリック→「www.google.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

感想

以上、PCウェブサイト版「Googleマップ」で上部に表示されるレストラン、ホテル、アクティビティ、美術館、交通機関などの各種ボタンを非表示にするCSSでした。

不快なクチコミを投稿しまくっているユーザーを非表示にする記事も書いています。

Google

Posted by ナポリタン寿司