LoginSignup
1
1

More than 3 years have passed since last update.

Google Maps の UI を消すブックマークレット

Posted at

Google Maps の UI 、邪魔じゃないですか?特にストリートビューのスクショを撮りたい時とか。
というわけで Google Maps の UI を非表示にしたり表示したりするブックマークレットを作りました。
ちなみに PC ブラウザ版の話で、 API は無関係です。

javascript: (() => { [ '.widget-pane-toggle-button-container', '#omnibox-container', '#vasquette', '.top-center-stack', '#titlecard', '#image-header', '.app-viewcard-strip', '.scene-footer-container', '#watermark' ].forEach(query => { const target = document.querySelector(query); target && (target.style['display'] = target.style['display'] === 'none' ? '' : 'none'); }); })(); void 0;

デモ

ストリートビュー - 起動前
スクリーンショット 0001-08-29 14.35.28.jpg
ストリートビュー - 起動後
スクリーンショット 0001-08-29 14.35.45.jpg
通常マップ - 起動前
スクリーンショット 0001-08-29 14.31.34.jpg
通常マップ - 起動後
スクリーンショット 0001-08-29 14.31.47.jpg

使い方

単純に Google Maps 上でブックマークレットを起動してください。 UI の表示状態が切り替わります。
ただし、左サイドバーだけは消えません。手動で非表示にしてから起動してください。
スクリーンショット 0001-08-29 14.32.18.jpg
また、すべての UI を消せるかどうかはチェックしていません。適当に修正してケロ。

仕組み

これまた単純に対象要素の display プロパティを操作しているだけです。
対象要素は classid で指定しているため、それらが変更されたら動作しなくなる可能性はありますがまぁいいや。

おまけ

現在のウェブページをフルスクリーン表示するブックマークレットも置いておきます( Mac の Chrome 以外では動作しないと思います…)。

javascript: (() => { [ 'mozRequestFullScreen', 'webkitRequestFullscreen', 'requestFullscreen' ].some(rf => { if (document.documentElement[rf]) { document.documentElement[rf](); return true; } }); })(); void 0;
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1