Googleマップをレスポンシブで埋め込み。色をなし（白黒）にする方法も

毎回同じやり方なのでメモ

Googleマップ埋め込み（レスポンシブ）

HTML

<div class="ggmap">
<iframe src="Googlemapのアドレス" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

CSS

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

padding-bottomの％を変えることで縦横比を変えることができるのですね

こちらより　ありがとうございましたm(_ _)m

【コピペOK】GoogleMapの地図をレスポンシブサイトに埋め込む方法
inthecom.net

Googleマップを白黒にする

.ggmap iframe{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

単純に、全てを白黒にするだけならこれでOKということで

コメント