【API不要】Googleマップの情報パネルを非表示にする方法

RELEASE / 2024.2.28 UPDATE / 2024.02.26

API不要

Googleマップ

iframe

WEBサイトに店舗や企業の地図を表示する際によく利用するGoogleマップ。表示する方法は気軽に利用出来るiframeを埋め込む方法と高度なカスタマイズも可能なGoogle Maps APIを利用する方法の2パターンがあります。
Google Maps APIを利用すればマップの色を変えたり、ピンをロゴに変えたり出来ないことはないくらい様々なことが可能です。
その反面、iframeを埋め込む方法は気軽に利用できる分、出来ることは限られてきます。

しかし、そんなiframeを埋め込む方法でも工夫次第ではAPI利用ほどではないですが、カスタマイズすることは可能です。
今回はiframeを埋め込む方法でGoogleマップを埋め込んだ際、地図の左上に表示される情報パネルと、右下に表示される＋－マークを非表示にする方法をご紹介したいと思います。

この記事の目次を表示

1 Googleマップの情報パネルを非表示にする方法
2 まとめ

Googleマップの情報パネルを非表示にする方法

まず初めにiframeでGoogleマップを埋め込む場合、以下のようなコードを埋め込みますね。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747798841979!2d139.74285797634224!3d35.65858483121676!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1708950259061!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

実際の画面で確認すると以下のように表示されます。
Googleマップが全画面に表示されるようにCSSで横幅と高さを指定しています。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

左上の情報パネルも右下の＋－マークも表示されていますね。
基本的にiframeでは任意に情報パネルも＋－マークも非表示にする設定というのは存在していませんが表示するGoogleマップのサイズによっては、自動でこれらがサイズが小さくなったり非表示になったりはします。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

しかし、大きなサイズのGoogleマップを表示する際は、必ず表示されてしまいます。

そこで、大きな画像でも情報パネルや＋－マークを非表示にするには、以下のようにiframeをタグで囲います。

<div id="map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747798841979!2d139.74285797634224!3d35.65858483121676!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1708950259061!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

続いて、iframeを囲ったタグに対して以下のようなcssを指定します。

<style>
#map {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
iframe {
    width: 100%;
    height: calc(100vh + 300px);
    margin-top: -150px;
}
</style>

このCSSを反映したものは以下のようになります。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

上の例のように、CSSの指定のみで情報パネルと＋－のマークが消えましたね。厳密には消えたのではなく、見えなくなりました。

iframeの高さをそれを囲うタグ以上の高さにして、ネガティブマージンで上へずらしたため画面外へ消えたため、見えなくなりました。
また右下にある＋－マークも同様に高さが増したため、下に追いやられてしまい見えなくなっています。
はみ出した分はoverflow: hidden;で隠してしまうため、見た目上は情報パネルと＋－のマークを非表示にすることが出来ています。