フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

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

API不要
Googleマップ
iframe

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

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

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

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;で隠してしまうため、見た目上は情報パネルと+-のマークを非表示にすることが出来ています。

まとめ

いかがでしょうか?
Google Maps APIを使用しなくてもこのように情報パネルと+-のマークは非表示にすることが出来ます。
また、以下の記事ではAPIを使用することなく、Googleマップの色を変更する方法を解説しています。

Google Maps APIは表示回数により課金される仕組みなので、出来れば使用したくないということもあります。
そのため、こんな方法で対応出来るということも知っておくと便利ですね。