スマホ閲覧時でもgoogleMAPを横幅に合わせて表示させる方法

スマホ閲覧時でもgoogleMAPを横幅に合わせて表示させる方法

スポンサーリンク

スポンサーリンク

企業のコーポレートサイトには必須とも言えるのが、googleMAPです。

所在地の詳細な情報と共に、地図であるgoogleMAPも掲載しておくことで、そのサイトを閲覧するユーザーにとっては信頼に足るかどうかの判断基準にも成り得るのです。

スマートフォン閲覧時のgoogleMAP

ところで、googleMAPをwebサイトに埋め込んだはいいけれど、スマートフォンで閲覧した際のサイズが大きすぎて、見栄えや操作性が悪くなってしまったことがある方も多いのではないでしょうか。

そこで今回は、スマートフォンで閲覧したときでも、googleMAPの横幅をスマートフォンの画面サイズに自動的に合わせて表示させる方法を、紹介したいと思います。

埋め込みはGoogleMAPのデフォルトであるHTML(iframe)を触ることなく、HTMLタグとCSSを追加するだけで実装が可能です。

googleMAPを横幅に合わせて表示させるCSS

通常、googleMAPを埋め込む際には、以下のような<iframe>タグをHTML上に追記します。

このとき、width=”600″ height=”450″と記載されている通りのサイズにてgoogleMAPが表示されてしまいます。

画面サイズの横幅が600pxよりも小さいスマートフォンでは、横幅が600pxであるgoogleMAPを画面内に収まるように表示させることが出来ませんので、その結果として横スクロールが必要となってしまう形になります。

これを解消するためには、<iframe>タグを<div>タグで囲むと同時に、横幅が自動的に画面サイズに適した表示となるCSSを追加します。

<iframe>タグを<div>タグで囲む

先ほどの<iframe>タグを、以下のように<div>タグで囲み、クラスを付与します。

CSSを追加する

<div>タグに付与したクラスに、以下のCSSを追加します。丸々コピペで大丈夫です。

5行目のpadding-bottom: 70%;の値が、googleMAPの横と縦の比率となります。70%の値を変更することで、googleMAPの比率も変更できます。

このCSSのポイントは、<div>タグで囲んだ中身の<iframe>タグの、widthとheightがそれぞれ100%となるように11行目と12行目に指定していること、またその効果が絶対的に行使されるように!importantを付けていることにあります。

まとめ

スマートフォン対応には、ViewportとメディアクエリによるCSSの振り分けを導入する方が多いかと思いますが、今回のgoogleMAPのサイズ調整もメディアクエリによる各CSSの読み込みに対応させる形で、スマートフォンの横幅に合わせた自動的なサイズ調整が可能となります。

Googleの検索エンジンにとってwebサイトのスマートフォン最適化がスタンダードとなりつつある今、googleMAP1つとってもきちんと閲覧出来るようにしておくことが、SEO対策にもなります。

ここまでお読みいただきまして、誠にありがとうございました。

スポンサーリンク

スポンサーリンク

スポンサーリンク