Google Mapの拡大地図を非表示にするが邪魔なので吹き飛ばす方法【レスポンシブ対応】

論より証拠！

コピペして使ってね。

一瞬で吹き飛ばせます！

HTML

<div class="responsive-map-container">
<iframe src=★埋め込みURL" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="expand_map">
<p><a href="★埋め込みURL" target="_blank">拡大地図を表示</a></p>
</div>

CSS

/* PC */
@media screen and (min-width: 769px) {

.responsive-map-container {
	  width: 100%;
  overflow: hidden;
}
.responsive-map-container iframe{
  width: 100%;
  margin-top: -170px;
}
.expand_map p {
	text-align: center;
	margin-bottom: 24px;
	width: 100%;
}
.expand_map p a {
	color: #3498db;
}
.expand_map p a:hover {
	color: #3498db;
}
}


/* SP */
@media screen and (max-width: 768px) {

.responsive-map-container {
  width: 100%;
  height: 250px;
  overflow: hidden;
	margin-top: 16px;
	margin-bottom: 16px;
}
.responsive-map-container iframe {
  width: 100%;
  height: 600px;
  margin-top: -150px;
}
.expand_map p {
	text-align: center;
	margin-bottom: 8px;
}
.expand_map p a {
	color: #3498db;
}

}