【コピペでOK】GoogleMapをレスポンシブで埋め込みスマートフォンでも見やすく表示させる方法

グーグルマップをレスポンシブデザインにしてスマートフォンに対応させる方法を紹介していきます。
Thanks to our advertisers


地図で目的地を探すときに誰もが使うようになったGoogleMapですが、サイト内で使うときはスクリーンショットした画像を入れるのではなく、グーグルマップをそのままサイトに埋め込むんであげたほうが、その場でユーザーはアプリを開くことなくマップを使えるのでとても使いやすいサイトになります。

しかし、 GoogleMapのコードをそのまま埋め込んでしまうと、スマートフォンから見たときにデザインが崩れてしまい、使い勝手があまり良くないのが弱点です。

これをしっかり表示させるためには、専門知識がない人もでもちょっといじるだけでスマホでもGoogleMapを見やすく表示させることができます。

今回はコピペでできる簡単な方法をご紹介します。

Thanks to our advertisers

GoogleMapをサイトに埋め込む方法。

まずGoogleMapのトップページへ行き、埋め込みたい地図を表示させます。

表示したい場所を決めたら、左上にあるメニューボタンを押します。

グーグルマップの埋め込み方を説明していきます。

 

メニューの中にある「地図を共有または埋め込む」を選択します。

グーグルマップの埋め込み方の説明をしていきます。

 

するとコードが表示されるので、これをコピーしてサイト内に貼り付ければ埋め込み完了です。

コードの左側にあるボタンからマップのサイズを変更することもできます。

Googlemapの埋め込み方を説明しています。

 

実際に埋め込むとこんな感じで表示されます。

 

サイト内に貼り付けたら実際に表示させて、マップを動かせるか確認してみましょう。

GoogleMapをスマートフォン対応させないと、サイト幅が増えてしまう。

ここからが今回の課題です。

このコードをそのまま貼り付けた場合、パソコンやタブレットなど画面幅の大きい端末では問題ないのですが、画面幅の小さいスマートフォンから見るとこのように表示されてしまいます。

グーグルマップのタグをそのまま埋め込むと、スマートフォンで見たときにサイトの幅が広がってしまいます。

そう、GoogleMapの幅がスマートフォンよりも大きいために、サイトの幅全体がGoogleMapに合わされてしまうんです。

これではせっかく便利な埋め込み機能も役に立ちません。

そこで、このGoogleMapを”レスポンシブ対応“させていきます。レスポンシブとは、様々なデバイスの幅に対応させるためのHTML&CSSの技術ですが、今回は特別な知識は必要ありません。

コピペで誰にでもできるGoogleMapの簡単レスポンシブ方法をご紹介します。

コピペでOK!GoogleMapをレスポンシブ対応させる方法。

先ほどの手順でGoogleMapの埋め込みコードを用意します。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.4495704002293!2d139.6973901148701!3d35.69055298019218!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd0d6b1ba1f%3A0x1c32a1f1ecacfdd5!2z5paw5a6_6aeF!5e0!3m2!1sja!2sjp!4v1463554214910" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

これを<div>~</div>と呼ばれる要素で囲み、class名を「g-map」とつけます。

<div class="gmap">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.4495704002293!2d139.6973901148701!3d35.69055298019218!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd0d6b1ba1f%3A0x1c32a1f1ecacfdd5!2z5paw5a6_6aeF!5e0!3m2!1sja!2sjp!4v1463554214910" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

そしてCSSの編集画面へ行き、以下のコードを貼り付けます。

.g_map {
position: relative;
padding-top: 75%;
height: 0;
overflow: hidden;
}
.g_map iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

貼り付けて保存したら、サイトの幅を縮めてみましょう。

グーグルマップがレスポンシブに対応している場合の表示方法を説明しています。

レスポンシブ対応していなければ青色のようにマップがはみ出ますが、レスポンシブ対応していれば赤色のようにマップの幅がサイトの幅にしっかりと収まります。

GoogleMapは右下に「拡大・縮小」ボタンがあるので、それが表示されているかを見ると分かりやすいかと思います。

P.S. GoogleMapは行き方埋め込むこともできる。

ちなみに、GoogleMapでは出発地点から目的地点までの行き方を埋め込むこともできます。

 

上の行き方は僕の家の最寄り駅から新宿駅までのルートです。

これで駅を降りてから目的地までのルートを示してあげることもできるので、使う機会があればぜひ試してみてください。

Thanks to our advertisers