特集
カテゴリー
タグ
メディア

新しいGoogleマップをレスポンシブ対応で埋め込む方法

新しいGoogleマップをレスポンシブ対応で埋め込む方法

Digital Inspiration:新しくなったGoogleマップでは、ウェブページに地図を埋め込むことが可能となりました。Googleマップのサイトを開き、埋め込みたいエリアをズームインします。右下の歯車アイコンをクリックして、メニューから「地図を埋め込む」オプションを選択すれば、埋め込みコードを取得できます。

埋め込みコードを使ったサンプルページがこちらです。デフォルトでは、Googleマップがレスポンシブに対応していません。スマートフォンなどでページを開くと、地図のサイズがデバイス画面にフィットせず、はみ出してしまいます。

同じGoogleマップをレスポンシブ対応で埋め込んだサンプルがこちらブラウザをリサイズしたり、スマートフォンからページを開いても、画面に合わせて地図のサイズを自動調整してくれます

Googleマップをレスポンシブに埋め込む方法

以下がGoogleマップのデフォルトの埋め込みコードです。

<!-- Height=450px; Width=600px -->

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>

パラメーターで指定されているとおり、埋め込み地図の横幅は600px、高さは横幅の75%(450px)がデフォルトです。

レスポンシブ対応にするには、埋め込みコードにCSSを適用します。サンプルは以下。4行目の「padding-bottom」で地図の縦横比を指定しています。

<style>

.google-maps {

position: relative;

padding-bottom: 75%; // これが縦横比

height: 0;

overflow: hidden;

}

.google-maps iframe {

position: absolute;

top: 0;

left: 0;

width: 100% !important;

height: 100% !important;

}

</style>

<div class="google-maps">

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>

</div>

How to Make the New Google Maps Embeds Responsive|Digital Inspiration

Amit Agarwal(訳:伊藤貴之)

swiper-button-prev
swiper-button-next