Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@mimonelu

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

More than 1 year has passed since last update.

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
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
mimonelu
Front-end engineer.

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?