論より証拠!
コピペして使ってね。
一瞬でグーグルマップの左上のクチコミ情報を吹き飛ばすことができます!
正確な位置情報ではない かつ クチコミが低い場合に非表示にさせると便利です。
不要なブランディングの低下を避けることができます。
目次
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 {
position: relative;
width: 100%;
padding-bottom: 71%;
overflow: hidden;
}
.responsive-map-container iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-top: -170px;
}
.expand_map p {
text-align: center;
margin-bottom: 24px;
width: 100%;
}
}
/* 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;
}
}
コメント