【テクニック】Googleマイマップのヘッダー部分を非表示にする方法

RELEASE / 2024.8.14 UPDATE / 2024.08.11

Google

ヘッダー

マイマップ

削除

非表示

GoogleマイマップはGoogleマップの機能の1つで、手軽に複数個所にピンを立て、それをWebサイトに埋め込み表示することが出来る機能です。
そんなGoogleマイマップは埋め込む際、共有ボタンや地図タイトルを表示しているヘッダー部分が地図上部に必ず追加されます。
このヘッダー部分があることでデザイン性が損なわれてしまうから非表示にできないかと思い、調べてみたけどそれは出来ないみたいでした。
Googleマイマップの設定で非表示にすることは出来ませんでしたが、CSSの指定を工夫することで非表示にすることが出来ました。
この記事ではその時実際に使用したGoogleマイマップのヘッダー部分をCSSの指定で非表示にするテクニックをご紹介したいと思います。

この記事の目次を表示

1 Googleマイマップのヘッダー部分を非表示にする
2 まとめ

Googleマイマップのヘッダー部分を非表示にする

まず実際にGoogleマイマップを埋め込むとどういう風に表示されるのか見てみましょう。

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

このようにデザイン性を損なう恐れのあるヘッダー部分が表示されてしまいますね。

これを以下のようにコーディングすることでGogoleマイマップのヘッダー部分を非表示にすることが出来ます。

<div class="map">
    <iframe src="XXX" width="640" height="480"></iframe>
</div>

1つ目のポイントはiframeを他のタグで囲うことです。

そして、CSSは以下のように指定します。

.map {
    height: 100vh;
    overflow: hidden;
}
.map iframe {
    width: 100%;
    height: calc(100% + 56px);
    margin-top: -56px;
}

まず、iframeを囲うclass="map"の要素に対して高さを100vhに設定し、overflow:hiddenを指定します。

次に、iframeの高さをcalc(100% + 56px)設定し、margin-top:-56pxで上に56ピクセル移動させます。
この56ピクセルはGoogleマイマップのヘッダー部分の高さです。
ネガティブマージンを使ってその分を上にずらすことで、ヘッダーが隠れるようになります。

そして、class="map"にoverflow:hiddenが指定されているため、はみ出した部分が画面から消えます。

実装サンプルはこちら。

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

Googleマイマップのヘッダー部分が非表示になりましたね。

まとめ

いかがでしたか？
この記事では、CSSの指定を工夫することでGoogleマイマップをスッキリと表示する方法をご紹介しました。
iframeの高さ調整とネガティブマージンを活用することで不要なヘッダー部分を隠し、より違和感の無いマップを表示させることが出来ます。
もしGoogleマイマップのヘッダー部分が不要だ、消したいという場合は今回ご紹介したCSSのテクニックを是非活用してみて下さい。