GoogleMapをレスポンシブ対応で埋め込む方法

こんにちわ。

先日、公園の地図を埋め込んだ際にちょっと戸惑ったので、備忘録としてやり方を残します。

まず、レスポンシブ対応って何?

「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。

現在はPCやスマートフォンなど、デバイス毎に各HTMLファイルを複数用意し最適化することが、一般的な制作方法となっています。
「レスポンシブWebデザイン」では、1つのHTMLファイルを、CSS3(Media Queries)で制御し、異なる画面サイズに応じてページのレイアウト・デザインを調整します。

出典:LIG INC. 必読!5分でわかるレスポンシブWebデザインまとめより

簡単に言うと、「パソコンでもスマホでもいい感じに見える」ということです。

GoogleMapのコードを貼り付けただけではうまく表示されない

GoogleMapで入手する貼り付け用のコードを貼るだけでは、うまく表示されません。

コードの入手のしかたはこちら

埋め込む前には準備が必要

まずは、WordPressの編集画面から「外観」→「テーマの編集」→「style.css」の最後に

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

を追記し、保存します。※追記するのは最後の行でOKです。

CSSを編集したら、「投稿の編集」画面でコードを入れる

CSSの編集が終わったら、「投稿の編集」画面の「テキスト」タブをクリックします。

GoogleMapで取得したコードを↓の青字部分に入れます。

<div class=”ggmap”>取得したコード</div>

先日紹介した公園のHTMLは、↓になります。

<div class=”ggmap”><iframe style=”border: 0;” src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.0673432554377!2d139.8085873152601!3d35.72456228018409!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ee1027501a7%3A0xe39d3c1e1491fb68!2z44CSMTMxLTAwMzQg5p2x5Lqs6YO95aKo55Sw5Yy65aCk6YCa77yR5LiB55uu77yY4oiS77yR!5e0!3m2!1sja!2sjp!4v1499646952518″ width=”800″ height=”600″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>

これを「テキスト」タブの画面に入れると↓のように表示されます。

 

スマートフォンでは↓のように表示され、無事にレスポンシブ対応が完了しました。

CSSやHTMLはとっつきにくいかもしれませんが、やっているうちにちょっとずつ慣れていきます。

この方法は便利なので、これからも場所の紹介をするときには使って行きます。