【API不要】Googleマップの情報パネルを非表示にする方法
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は表示回数により課金される仕組みなので、出来れば使用したくないということもあります。
そのため、こんな方法で対応出来るということも知っておくと便利ですね。