CSS:Google Maps埋め込み時に左の吹き出し(ポップ)を消す

Google Maps埋め込み時に表示される左上のポップを、非表示にしていきます。Google側で制御ではなく、CSSで可視領域を制御しています。

表示サンプル

まず、普通に設置した場合はこちら。
通常通りに共有ボタンから埋め込みコードを取得して貼り付けています。特別なことはしていませんが、widthheightをCSS側で指定しています。

デモ

左のポップを非表示にしたものがこちら。
htmlはまったく変えずに、CSSの調整のみでポップを出なくしています。

デモ

実装方法

html
<div id="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12958.627135224153!2d139.8107004!3d35.7100627!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1592969771062!5m2!1sja!2sjp" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>

htmlは、コピーしてきた埋め込みコードをdiv#mapで囲んでいるだけです。

CSS
#map {
  width: 100%;
  height: 500px;
  overflow: hidden;
}

#map iframe {
  width: 100%;
  height: 860px;
  margin-top: -170px;
}

CSSは、#mapに実寸サイズを指定し、overflow: hidden;で枠からはみ出た要素を非表示にしておきます。
iframeの指定は、実寸よりも大きいサイズを設定して、左のポップ分margin-top(ネガティブマージン)で要素を上にずらしています。各サイズについては、要素を見ながら調整していくのが良さそうです。

ちなみに、スマホの場合はこんな感じに設定しました。

CSS
#map {
  width: 100%;
  height: 250px;
  overflow: hidden;
}

#map iframe {
  width: 100%;
  height: 600px;
  margin-top: -150px;
}

実装自体はとても単純で簡単にできます。アイディア次第でうまく調整できる例ですね。とても勉強になりました。

Google Mapの左上のポップ、枠、吹き出しを消す - いろんなことの備忘録
Google Mapの左上の表示がいらない時、邪魔な時の対処法です 消すというよりは見えなくするようです 以下のコードをコピペしてください
http://tamsaaan.hatenablog.com/entry/2015/08/02/184546
URLをコピーする

広告