Google Mapをレスポンシブに対応する方法 ホームページ制作 | 墨田区

Google Mapsをレスポンシブに対応する方法

LINEで送る
Pocket

Google Mapsをレスポンシブに対応する方法をご紹介します。

以前、こちらのページで「Google Maps Embed API」を使ってWebサイト上に地図を埋め込む方法をご紹介しました。
Google Maps Embed APIを使ってWebサイトに埋め込む方法

いざスマホで見てみると、おやおやビックリ!!
地図が大きすぎてスクロールできないではありませんか。
Google Maps Embed API

これはマズイ!!
閲覧者の方に申し訳ないし、なによりUIが悪すぎーー!!!

そんなわけでGoogle Mapsをレスポンシブ対応しました。
方法を掲載しておきます。




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


Google Mapsをレスポンシブに対応する方法

このサイトは「WPtouch Mobile Plugin」というWordpressのプラグインをカスタマイズしてスマホ対応しています。
WPtouchをカスタマイズする方法はこちら

そのため、以下のパスのstyle.cssに追記しました。
/wp-content/plugins/wptouch/themes/foundation/default

以下のコードを追記します。

/****************************************

  Google Map Embed API

*****************************************/
.gmaps {
  position: relative;
  padding-bottom: 56.25%; /*16:9*/
  height: 0;
  overflow: hidden;
}

.gmaps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

もちろんPCサイト用のオリジナルテーマのstyle.cssにも同じ記述をおこないます。

縦横比は幅の 56.25% を高さとします。縦横比16:9とした場合の計算式はこうです。
9 / 16 x 100 = 56.25

htmlはこんな感じです。

<div class="gmaps">
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/directions?origin=%E6%9D%B1%E4%BA%AC%E9%A7%85&destination=%E6%9D%B1%E4%BA%AC%E3%82%B9%E3%82%AB%E3%82%A4%E3%83%84%E3%83%AA%E3%83%BC&key=AIzaSyCvvQrY_hUhY3t2kwDZzuWT5fIqxmdf2lo" allowfullscreen></iframe>
</div>

すると、スマホで見るとこんな感じになります。
ふむふむ、なかなかいい感じですね^^
Google Maps 縦横比56.25%


縦横比を仮に75%にしてみると、こんな感じになります。
おお、なんかこっちの方がしっくりきますね。
Google Maps 縦横比75%

そんなわけで、PCサイト用は56.25%、スマホサイト用は75%にしました。


まとめ

このサイトもスマホからのアクセスが全体の10%程あります。技術系の情報サイトといえ、PCからのアクセスばかりではないので、きちんとスマホ対応していきたいと思います。

皆さんも試してみてください。

他にもっといい方法があったらコメントいただけるとうれしいです。


おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

コメントを残す

お名前 (必須)
メールアドレス
(アドレスは公開されません)

コメント(必須)

Trackback URL