Google Maps iframeタグ埋め込み時に左上のポップを非表示にする

2021-2-1

Google MapのAPIキーを取得してもらうのも大変なので、普通のiframeタグで埋め込むことも多いです。その際に左上に地域名が表示されてしまうのを非表示にする方法です。パラメーターとかでの対応はできないので強引に見えないようにします。

<div id="map">
<iframe src="**********" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>

#map {
  width: 100%;
  height: 600px;
  overflow: hidden;
}
#map iframe {
  width: 100%;
  height: 960px;
  margin-top: -170px;
}
※heightの数値はサイトよって可変が必要。

参考サイト
https://monakanote.net/coading/css/css-googlemaps-20200624/

デザイン的にiframeのままだと気になる場合は、CSSでフィルター処理を追加してもいいかもしれません。

-webkit-filter: grayscale(100%);
filter: grayscale(100%);