Googleマップをスマートフォンでも最適な大きさで表示しよう!

  • URLをコピーしました!

ちょっと前までGoogleマップをレスポンシブにするために、以下の方法を使わせていただいていました。

@media (max-width: 767px) {
	iframe {
		width: 100% !important;
	}
}

とても便利な方法なのですが、これだと横幅はちゃんとレスポンシブになるのですが、高さはPC版に埋め込んだソースをそのまま引き継ぐので、ちょっと間延びした印象になってしまいます。

Googleマップをスマホに埋め込む

何かいい表示方法はないかなあと探していた時、lifehackerさんの記事で以下のコードが紹介されていました。以下のコードの「75%」の部分を変更することで、地図の縦横比を変えることができます。

.google-maps {
position: relative;
padding-bottom: 75%; /*これが縦横比*/
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?省略…" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

埋め込んでみるとずいぶんいい感じでした。

Googleマップをスマホに埋め込む(縦横比75%)

しかし!「%」で設定してしまうと、スマートフォンを横にして見た時に画面いっぱいにGoogleマップが!ということになりますよね。例えばこのように。

Googleマップをスマホに埋め込む(横にした場合)

私としては横幅はレスポンシブにしたいのですが、高さは固定にしたほうが見やすいように感じます。(まー、スマートフォンを横にして見ることってあんまりないですけどね!)

というわけで、上記のコードをちょっと改変。%の部分をpxで固定にしました。

.google-maps {
position: relative;
padding-bottom: 250px; /*高さは250pxで固定*/
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

こうすれば、スマートフォンを横にした時も高さは変わらず、横幅だけが変化します。

Googleマップをスマホに埋め込む(横にした場合)

スマートフォン・PCでのGoogleマップの高さについてお悩みの方はぜひ、お試しください!
以上、彩がお伝えしました。

参考にした記事

この記事が気に入ったら
いいね または フォローしてね!

この記事をシェアする!
  • URLをコピーしました!

この記事を書いた人

彩のアバター UIデザイナー

自社メディアサイトのUIデザイナーを経てフリーランスとして活動しています。デザイン・コーディングからサイト運営・改善、バナー作成など色々やってました。

4歳の娘がいます。ゴッホとコーヒーとスナフキンが大好き。

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次