Googlemapをiframeで埋め込む際に、左上のネームカードや、右下の拡大縮小アイコン(+－アイコン)が邪魔になった事はありませんか?
そんな時に役立つAPI不要でCSSのみで出来る方法を解説していきます。
何もしないで埋め込みした場合
まずは何もしないで普通にGoogleマップを埋め込んでみます。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.828030694494!2d139.76454451176446!3d35.681236172472985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1722557426479!5m2!1sja!2sjp" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>左上には場所名などの情報が出るネームカード、右下には拡大縮小が出来るアイコンが表示されています。
これはマップを表示する大きさによってサイズが小さくなったり、一部表示されないものもあります。
これらを表示したくない場合は、次で説明する方法で非表示にする事が可能です。
ネームカードと+－アイコンを非表示にする方法
ネームカードと+－アイコンを非表示にするには、iframeをdiv等で囲い親要素とし、CSSを以下のようにします。
<div class="googlemap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.828030694494!2d139.76454451176446!3d35.681236172472985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1722557426479!5m2!1sja!2sjp" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>.googlemap {
width: 100%;
height: 300px;
overflow: hidden;
}
.googlemap iframe {
width: 100%;
height: calc(100% + 300px);
margin-top: -150px;
}上記のHTMLとCSSを反映したものが以下となります。
iframeへの親要素の追加と、CSSの追加で左上のネームカードと、右下の拡大縮小アイコン(+－アイコン)が消えました。厳密には「消えた(非表示)」ではなく、見えなくしたという方が正しいかと思います。
iframeの高さを親要素よりも高くして、ネガティブ(マイナス)マージンではみ出た分を上にずらしているため、左上のネームカードは見えなくなりました。
同様に右下の拡大縮小アイコン(+－アイコン)も、親要素からはみ出ているため見えなくなっています。
親要素には、はみ出た部分が見えなくなるようoverflow: hidden;を指定してあります。
Googleマップの表示する大きさ等によって、ネームカード等が少し表示されてしまう場合がありますので、その場合はiframeの高さとネガティブマージンの値を調整してください。
注意点としては、上記の方法で埋め込むとマップが少し拡大されてしまう事がありますので、拡大されている場合は、埋め込むマップ自体を少し縮小したものを埋め込んでください。
さいごに
いかがでしたでしょうか。
Googleマップは、APIを仕様せずiframeで埋め込む事も多いので、一つの手法として覚えておくと便利です。
