埋め込み Google Map の「拡大地図を表示」を非表示にする（レスポンシブ対応も）

Google Map を埋め込んだ際に左上に表示される「拡大地図を表示」を CSS を使って非表示にする方法

HTML

東京スカイツリーの埋め込みコード

<div class="map">
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4581.563465001861!2d139.80876989596214!3d35.710116562962654!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1648919035152!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

通常のマップ（レスポンシブ対応無し）

CSS

.map {
	width: 100%;
	height: 300px;
	overflow: hidden;
	filter: grayscale(1); //グレースケールにする場合
}
.map iframe {
	height: calc(300px + 360px);
	margin-top: -170px;
}

レスポンシブ対応のマップ

CSS

.map {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	overflow: hidden;
	filter: grayscale(1); //グレースケールにする場合
}
.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% + 360px);
	margin-top: -170px;
}