広告を利用しています

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

【Stylebot】Google検索の「地図(マップ)」を非表示にするCSS

2022年6月4日Google

Googleのアイコン

この記事では、Google検索で、食べ物や店の名前を検索した時に表示されるGoogleマップ欄を非表示にするCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。

Google検索結果に表示されるGoogleマップ欄を非表示にしたイメージ画像

本記事で紹介するCSSを使えば、Googleの検索結果に表示される「マップ」欄を消すことができます。

Googleで、「飲食店」、「カフェ」、「カラオケ」といった店・場所を検索すると、大体2~4番目あたりに、「マップ」という項目が表示されます。

検索した単語に関連する場所・店が、Googleマップの2Dで表示されます。上部に地図、下部に店名、レビュー、営業時間などが表示されます。

人によっては、邪魔かもしれません。この機能、自動的に自分が住んでいる場所付近がヒットするようになっています。僕の場合、広島です。迂闊にこの画面をネット上に公開してしまうと、住んでいる地域がバレてしまう可能性があります。

配信者や、ブロガーさんは、非表示にしておくといいかもしれません。これまで通り、普通にGoogleマップは利用できます。あくまで、Google検索結果に載せないようにするだけです。

自身の環境上、非表示にしているだけなので、誰にも迷惑をかけませんし、いつでもオンオフを切り替えられます。本記事で紹介するStylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

おまけで、検索ボックス下に表示される「地図」ボタンを非表示にするコードも紹介します。

Googleの他の不要な項目を一括削除したい方へ

2022年7月8日に、全てのGoogleの不要項目を削除するまとめ記事を公開しました。

これまでは、1つずつ記事をチェックする必要がありましたが、上記記事を参考にすることで、「強調スニペット」、「関連する質問(旧:他の人はこちらも質問)」、「トップニュース」、「レシピ」、「マップ」、「動画」、「関連性の高い検索(他のキーワード)」、「フッターにある現在地」を、一気に全削除できます。

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

「Chromeに追加」でインストールできます。

Stylebot - Chrome ウェブストア

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

Google検索結果の「地図(マップ)」を非表示にするCSS

Googleで適当な単語を検索します。試しに、「ナポリタン」で検索してみます。僕の場合、3番目にマップが表示されました。

その状態で、インストールしたStylebotアイコン→「Stylebotを開く」をクリックします。

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。

/*「地図(マップ)」非表示*/
div[jsmodel="QPRQHf"] {
  display: none;
}

下記画像のようになればOKです。書き込めたら、右上の「×」をクリックします。

Stylebotのスクリーンショット2

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

瞬時に反映されて、「マップ」項目がごっそり消えます。どの単語で検索した時でも表示されません。

CSSでマップ欄を非表示にした画像

「カラオケ」で検索した時の比較画像も貼っておきます。しっかり、非表示になっています。

「カラオケ」で検索した時のGoogle検索結果比較画像

ライトテーマ使用時も反映されます。

オンオフ切り替えたい時は、Googleの検索結果上で、拡張機能アイコンをクリック→「www.google.com」をオフにします。これで、元通りマップが表示されます。完全に使わなくなった場合は書き込んだコードを削除します。

Stylebotのスクリーンショット3

【おまけ】検索ボックス下の「地図」ボタン非表示

上記CSSは、検索結果に表示されるマップ欄を非表示にするだけです。検索ボックスの下にある「地図」ボタンも非表示にしたい場合、追加で下記のCSSを書き込みます。

/*検索ボックス下の「地図」ボタン非表示*/
a[href^="https://maps"] {
  display: none;
}

「地図」ボタンが消えます。完全にマップからおさらばできます。Googleマップを開きたい場合は、URLを入力します。

検索ボックス下の「地図」ボタンを非表示にするCSSを適用した比較画像

感想

以上、Googleの検索結果に表示される「マップ」カテゴリーをごっそり非表示にするCSSについてでした。

Googleの「君がいる場所、ここでしょ?」という圧力、びっくりします。

合わせて読みたい

2022年6月4日Google

Posted by ナポリタン寿司