ホーム(記事一覧)へ

【class不要!】googlemapをレスポンシブ対応

googlemapをレスポンシブ対応させるために クラス付きのdivで囲って比率を固定する方法があちこちで紹介されています。

でも、divとクラスで囲うの面倒じゃないですか?
googlemapのコード貼り付けるだけで済ませたい!

googlemapの比率を固定する必要ありますか?
パソコンで見たときとスマホで見たとき、それぞれ適切なサイズであればOKなハズ!

ということで、googlemapのコードを貼り付けるだけでレスポンシブ対応する方法のご紹介です。

結論

横幅100%にして高さ固定する。

完成イメージ

↑ブラウザの幅を狭くしても中央が維持できていることがわかるかと思います。また、スマホ幅だと高さが低くなります。

html

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12963.311413609996!2d139.7583647029262!3d35.681240537481365!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1582110593380!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

htmlはgooglemapから取得したコードを何も加工せずにそのまま貼っちゃってください。

CSS

iframe[src*="www.google.com/maps"]{
    width: 100%;
    height: 500px;
}
@media(max-width:750px){
    iframe[src*="www.google.com/maps"]{
        width: 100%;
        height: 300px;
    }
}

↑このCSSをそのままコピペしちゃってください。

iframe[src*="www.google.com/maps"]というのはsrcにwww.google.com/mapsを含むiframeへの指定ということです。
これなら他のiframeへは影響ありません。

高さの指定はご自由に。
スマホで高さを抑えたいならメディアクエリで再指定すればOKです。

まとめ

この方法ならいちいちdivとクラスを書き加える必要もなくレスポンシブ対応もでき、サイト内にいくらでもgooglemap貼り放題です。

以上、googlemapのコードを貼り付けるだけでレスポンシブ対応する方法でした。

関連記事