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

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

以前「Google Maps Embed APIを使ってWebサイトに埋め込む方法」で「Google Maps Embed API」を使ってWebサイト上に地図を埋め込む方法を紹介しました。

いざスマホで見てみると、おやおやビックリ!!

地図が大きすぎてスクロールできないではありませんか。

Google Maps Embed API

これはマズイ!!ユーザーに申し訳ないし、なによりUIが悪すぎる!!!

そんなわけでGoogle Mapsをレスポンシブ対応しました。

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


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%」にしました。

まとめ

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

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

皆さんも試してみてください。他にもっといい方法があったらコメントいただけるとうれしいです。

おつかれさまでした。

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