Google Maps iframeタグ埋め込み時に左上のポップを非表示にする
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%);【追記 2025.10.28】
iframeタグに直接追加する方が簡単ですね。
filter:grayscale(100%);-webkit-filter:grayscale(100%)<div id="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567846113126!2d139.80851171544617!3d35.710062680187654!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1545458808759" width="600" height="450" frameborder="0" style="border:0;width:100%;filter:grayscale(100%);-webkit-filter:grayscale(100%)" allowfullscreen></iframe>
</div>参考サイト
https://onoredekaiketsu.com/howto-change-color-of-iframe-googlemap/
