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>

すると、スマホで見るとこんな感じになります。ふむふむ、なかなかいい感じですね^^

縦横比を仮に75%にしてみると、こんな感じになります。

おお、なんかこっちの方がしっくりきますね。

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

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

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

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