menu
menu

キーワード検索

 

最近の投稿

Googleマップをレスポンシブデザインに対応させる方法

  • Labs

Googleマップ

こんにちは(・∀・)

前回YouTube動画をレスポンシブデザインに対応させる方法をご紹介しました。

今日はWebサイトに貼り付けるGoogleマップをレスポンシブデザインに対応させる方法についてご紹介します。

GoogleマップをWebサイトで表示する

Googleマップをブラウザで開いてWebサイトに表示したい場所を検索します。

GoogleマップをWebサイトで表示する

ここでは「Century City」を検索してみました。検索窓の左側にあるメニューボタンをクリックしてください。

GoogleマップをWebサイトで表示する

メニューが展開されますので、その中の「地図を共有または埋め込む」をクリックしてください。

GoogleマップをWebサイトで表示する

ポップアップメニューが展開されたら「地図を埋め込む」をクリックしてください。

GoogleマップをWebサイトで表示する

するとコードと地図が表示されます。大きさを変えたい場合は左上にある「中」のところをクリックして大きさを変更してください。その右側にあるのがWebサイトに張り付けるコードです。コピーしてください。

GoogleマップをWebサイトで表示する

そのままだとWebサイトに張り付けたGoogleマップはレスポンシブデザインに対応しておりません。

コピーしたコードをHTMLに張り付けてみます。次のように表示されます。

コード内のwidthとheightを直接変更した場合、width="100%"、height="auto"で横幅は100%で可変になりますが、高さがうまくいきません。

なのでCSSでレスポンシブデザインの設定をします。


Googleマップをレスポンシブデザインに対応させる

先ほどコピペしたコードに親要素を作ります。ここでは「maps」にします。

HTML

<div class="maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13222.30888251384!2d-118.41835501581419!3d34.054714571479224!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2bbf2e8f4dfab%3A0x745acb74f412cb7a!2z44Ki44Oh44Oq44Kr5ZCI6KGG5Zu9IOOCq-ODquODleOCqeODq-ODi-OCouW3niDjg63jgrXjg7Pjgrzjg6vjgrkg44K744Oz44OB44Ol44Oq44O844O744K344OG44Kj!5e0!3m2!1sja!2sjp!4v1488160614708" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

CSSで次のように設定します。

CSS

.maps {
  margin: 0 auto;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

親要素「maps」にpositionプロパティの値relativeを設定、「iframe」本体に値absoluteを設定します。

動画の画面比率を出して親要素にpaddingで指定します。paddingはtopでもbottomでもどちらでもいいです。

画面比率の計算式は次の通りです。
4:3の場合
100 / 4 x 3 = 75%
16:9の場合
100 / 16 x 9 = 56.25%

「iframe」の横幅・高さを「100% !important」で指定します。

すると地図画面が縦横可変になります。


いかがでしたでしょうか、前回ご紹介しましたYouTubeをレスポンシブデザインに対応させる方法とやり方は同じです、わかってしまえば簡単ですね。以上がGoogleマップをレスポンシブデザインに対応させる方法でした。

関連リンク

YouTubeをレスポンシブデザインに対応させる方法

  • カテゴリー:Labs