【Googleマップ】不快で邪魔なレビューを非表示にするCSS/JavaScript
この記事では、PCウェブサイト版「Googleマップ」で自分が見たくない不快なクチコミばかり投稿しているユーザーを非表示にするCSSとJavaScriptを書きます。
CSSなら「Stylus」や「Stylebot」、JavaScriptなら「Tampermonkey」や「ScriptCat」などを使います。
PCウェブサイト版「Googleマップ」で観光地のクチコミ（レビュー）を見ていると、自分勝手の理不尽レビューが目に入ることがあります。
予約制って事前に調べたらすぐに分かるのに「予約しないと入れなかった（星1）」、個人の方が細々やっているひまわり畑で「まだ咲いてなかった（星1）」、山の中にある滝で「虫が沢山いた。滝も微妙だった（星1）」、牧場のソフトクリームで「アイスが溶けてズボンにたれた（星1）」みたいなね。
全く知らない土地だったり、たまたま本当に理由があって低評価をつけた方だったりはどうでもいいんですが、そうじゃなくて投稿しているレビューのほとんどが低評価で、どれも自分勝手な理由にしている方だと最悪です。
それでも自分の生活圏外なら目に入らないのでいいんですが、生活圏内だと近くの場所を調べるたびに「うわっ…こいつ、ここにも行ってるじゃん。当然のように低評価…はぁ…せっかく調べたのに気分悪くなるな…」ってなります。
同じ生活圏内だとどうしても目に入りやすくなるんですよね。
SNSみたいにミュート・ブロック機能が標準であったらいいんですが、クチコミという性質上そういうのはなく報告機能があるのみです。
CSSやJavaScriptを利用することで、自身の環境上で見えないよう非表示にできます。あくまで自分のPC画面だけの反映です。他人や運営には一切影響しません。
本記事はChrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。
本記事はGoogleマップを見る利用者側が「こいつが投稿しているレビュー不快だなぁ。邪魔だから見えないように表示上消したいなぁ」ってパターンです。
CSSで消したところで他の人にはふつーに表示されるし、評価が変わることもないです。あくまでCSSを書き込んだブラウザ上だけの見た目変化です。たったそれだけです。
店舗経営者やオーナーが悪意ある口コミを根本から削除するみたいなことじゃないです。そういうのは知りません。
JavaScriptを使って特定ユーザーの口コミを非表示にする方法
個人的にはJavaScriptを使った方法が圧倒的におすすめです。
書き込んであとはじゃんじゃん消したいユーザー名を専用のポップアップ内に書き込んでいくだけです。
ただし、デメリットもあります。僕はJavaScriptが全く分からないので全てChatGPT（AI）任せで作成した点です。ただでさえJavaScriptはCSSよりも悪いことができてしまう危険と表裏一体なのに、まさかの僕が作成していないときました。
「えっ…AI？怖いな…」って方はやめたほうがいいと思います。
でもCSSよりも管理や追加が楽なので僕はJavaScriptのほうを使っています。
前提
JavaScriptを適用できる拡張機能を既に導入していて、かつ使い方もある程度知っている方向けです。「JavaScript？何それ？」って方は以下記事から見ることをおすすめします。
https://www.naporitansushi.com/scriptcat-userscript-chrome-e...
拡張機能は色々種類がありますが、有名どころだと「Tampermonkey」です。僕は「ScriptCat」を使っているので本記事ではそちらでの解説になります。
スタイルシートの作成
「ScriptCat」の場合アイコンクリック→右上の三点ボタン（⋮）→「新しいスクリプトを作成」をクリックします。
スクリプトを書き込む
以下のコードを書き込みます。
// ==UserScript==
// @name Googleマップの不快口コミ削除
// @namespace https://www.naporitansushi.com/google-maps-hide-annoying-reviews-css/
// @namespace https://chatgpt.com/share/688e0345-9624-8009-80b4-23abce298b85
// @author ChatGPT
// @version 1.0.0
// @description Googleマップのレビューから指定したユーザー名の口コミを非表示にします。
// @match https://www.google.com/maps/place/*
// @grant GM_getValue
// @grant GM_setValue
// ==/UserScript==
window.addEventListener('load', async () => {
const KEY = 'gmap_hidden_users', S = document.createElement('style');
S.textContent = `
#gmapf-btn{position:fixed;top:14px;right:113px;z-index:9999;background:#17a773;color:#fff;padding:9px 13px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:bold;box-shadow:0 4px 6px rgba(0,0,0,.3);transition:.1s}
#gmapf-btn:active{transform:translateY(2px);box-shadow:0 2px 3px rgba(0,0,0,.2)}
#gmapf-popup{position:fixed;top:7%;right:20px;z-index:9999;background:#fff;color:#000;border:2px solid #17a773;border-radius:10px;padding:10px;width:373px;box-shadow:0 0 8px rgba(0,0,0,.2);font-size:14px;display:none}
#gmapf-textarea{width:100%;min-height:400px;max-height:70vh;resize:vertical;padding:6px;font-size:14px;border:1px solid #ccc;border-radius:6px;box-sizing:border-box;margin-bottom:10px}
#gmapf-controls{display:flex;justify-content:space-between}
#gmapf-controls button{cursor:pointer;border:none;border-radius:6px;padding:6px 10px;font-size:14px;font-weight:bold}
#gmapf-save{background:#17a773;color:#fff}
#gmapf-cancel{background:#ccc;color:#333}
`; document.head.appendChild(S);
const save = v => GM_setValue(KEY, v), load = () => GM_getValue(KEY, '');
const hide = async () => {
const list = (await load()).split('\n').map(t => t.trim()).filter(Boolean);
document.querySelectorAll('div[data-review-id]').forEach(div => {
const aria = div.getAttribute('aria-label');
if (!aria) return;
if (list.some(t => aria.includes(t))) div.style.setProperty('display', 'none', 'important');
});
};
const btn = Object.assign(document.createElement('div'), { id: 'gmapf-btn', textContent: '⚙️ フィルター設定' });
const popup = Object.assign(document.createElement('div'), { id: 'gmapf-popup' });
const textarea = Object.assign(document.createElement('textarea'), { id: 'gmapf-textarea' });
const controls = Object.assign(document.createElement('div'), { id: 'gmapf-controls' });
const saveBtn = Object.assign(document.createElement('button'), { id: 'gmapf-save', textContent: '保存' });
const cancelBtn = Object.assign(document.createElement('button'), { id: 'gmapf-cancel', textContent: 'キャンセル' });
let cached = await load();
textarea.value = cached;
saveBtn.onclick = async () => { cached = textarea.value; await save(cached); await hide(); };
cancelBtn.onclick = () => { textarea.value = cached; popup.style.display = 'none'; };
btn.onclick = () => { textarea.value = cached; popup.style.display = popup.style.display === 'none' ? 'block' : 'none'; };
controls.append(saveBtn, cancelBtn);
popup.append(textarea, controls);
document.body.append(btn, popup);
hide();
new MutationObserver(hide).observe(document.body, { childList: true, subtree: true });
});
「author」に「ChatGPT」と書いているようにAI作成です。
少しでも透明性を上げるために実際ChatGPTと僕がやりとりした会話履歴ページを貼っています。以下です。僕が以前ChatGPTにお願いして作成してもらったTver版をベースに作成しています。
https://chatgpt.com/share/688e0345-9624-8009-80b4-23abce298b...書き込めたら、ファイル→保存します。
ユーザー名を書き込んで非表示にする
書き込めたら「Googleマップ」を開きます。既に開いていた場合は一度ページをリロードします。
スクリプト導入後は右上に「フィルター設定」という緑のボタンが表示されます。
クリックするとその下にテキストボックスが表示されます。
一点注意点があります。僕の環境だとなぜか一回目は反応せず、二回クリックして開きます。Tver版もそうだったので、多分コードにどこか不備があるんだと思います。AI全任せなので分かりません。
修正しようと思ったらできそうですが、別にそこまでストレスじゃないので放置です。
非表示にしたい不快なユーザー名を範囲選択でコピーして、開いたテキストボックスに貼り付けます。例えば僕を消したい場合は「Sushi Naporitan」です。
ユーザー名の部分はリンクなので範囲選択ちょっと難しいですが、Altキーを押しながらなんとか頑張りましょう。
余力がある方は以下CSSをCSSを適用できる拡張機能（例：Stylus、Stylebot）に書き込むことで範囲選択が楽になります。ユーザー名部分のリンクを無効化するCSSです。
/*クチコミのユーザー名部分のリンク無効化*/
button[data-review-id][data-href^="https://www.google.com/maps"]:not([aria-label^="写真:"]) {
pointer-events: none !important;
text-decoration: none !important;
}一行につき一ユーザーです。
<!--「Googleマップの不快口コミ削除」スクリプトに書き込む例。一行に一つのユーザー名-->
Sushi Naporitan
不快太郎
ソーセージ寿司
けんじ部分一致でも動作するので長い名前で書き込むのが大変な場合は一部分だけ書いてもOKです。
ただし、他のユーザーにも使われている文字列を使うのはおすすめしません。
「たく」っていう人を非表示にするために「たく」を登録すると、「たく」って人だけでなく、「たくや」、「たくぞう」、「だいたく」みたいな含まれたユーザー全員消えてしまいます。
よって一文字、二文字のユーザーで他でも使われていそうな場合はやめたほうがいい気がします。
非表示になったか確認
書き込めたら「保存」ボタンを押します。即座に反映されてそのユーザー名の口コミが消えます。
やっぱりやめたい場合は書き込んだ名前を消して「保存」を押します。消した場合は即座に反映されず、一度リロードしないと表示されないです。
どの観光スポットでもその文字列が含まれたユーザーのクチコミを非表示にしてくれます。自分と同じ生活圏内にいる不愉快な人を非表示にしておけば、余計な気疲れが減ります。
同じ場所で非表示対象の人が複数連続でいた場合、下記画像のようにちょっと気になる余白ができます。もともとクチコミ間には一定の余白が設けられていたのでそのせいです。
いちおCSSを使うことで余白を除去できますが、非表示ではないクチコミ間の余白も狭くなるので見た目がぎゅっとなりすぎるかもです。僕は余白なしで一ページに収まる情報量増やしたいので嬉々として使っています。
/*クチコミの間にある余計な余白*/
div[data-review-id][style*="display: none"]+div[style="height: 16px;"] {
display: none !important;
}CSSを使って特定ユーザーの口コミを非表示にする方法
CSSは僕が実際に調べて作成したものなので、何かあった時にわりと対応しやすいですが、いかんせんCSSは手間です。
非表示にしたいユーザーが5名いたら5回分のCSSを書いて、名前の部分をいちいち置き換える…という手間があります。かつサイトの仕様変更で使えなくなった場合に複製したCSS分全部修正が必要になります。
そこまで非表示にしたいユーザーがいない場合はCSSのほうがおすすめですが、もっと大量の人数を非表示にしたい場合は上記のJavaScriptがおすすめです。どっちも一長一短って感じです。
スタイルシートを開く
「Googleマップ」にアクセスします。インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
本来はGoogleマップのページ上（www.google.com/maps）だけで動作するスタイルシートを作成するのが一番ですが、本記事では省略します。こだわりたい方はこちらの記事に方法を書いています。
右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。
下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。
CSSを書き込む
以下のコードになります。
/*Googleマップのレビューから特定の人非表示*/
div[data-review-id][aria-label="名前"] {
display: none !important;
}上記はサンプルです。「名前」の部分を非表示にしたいユーザー名（完全一致）に置き換えます。
本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
消えたか確認
非表示になります。
部分一致ではないのでユーザーの名前をピンポイントで打ち込む必要があります。
もし部分一致にしたい場合は「[aria-label="名前"]」の部分を「[aria-label*="名前"]」って感じでアスタリスク記号を間に書きます。
感想
以上、PCウェブサイト版「Googleマップ」で自分が見たくない不快なレビューばかり投稿しているユーザーを非表示にするCSSとJavaScriptでした。
CSSもJavaScriptもサイトの仕様変更があった時に使えなくなるかもしれない点は変わらないです。
JavaScriptのほうは何かのタイミングで書き込んだテキストが消える可能性もあるので、心配な方は別の場所（メモ帳）に書いておくといいかもです。
本当は「Greasy Fork」などのストアにアップロードして自動更新も設定すれば利用者にとって非常に楽なんでしょうが、僕は素人なのでそこまで分かりません。
もし使えなくなっていたら問い合わせなどから教えてください。僕ができる範囲で修正して記事更新するので、そのコードを新しくコピペしてください。