Google Mapのレスポンシブ ウェブ デザイン対策

Google Mapのレスポンシブ ウェブ デザイン対策

Googleではレスポンシブ ウェブ デザインの推奨していますので、Google Mapも画面サイズ(PC Tablet smartphone)によって表示サイズが変わると便利だと思います。

そこで今回はGoogle Mapのレスポンシブ ウェブ デザイン対策を紹介します。対策はとっても簡単で単純なことです。

Google Mapのレスポンシブ ウェブ デザイン対策

Google Mapよりウェブサイトへの地図埋め込み用 HTML コードを取得すると<iframe width=”425″ height=”350″ frameborder=”0″・・・みたいなコードを取得することが出来ます。この取得したコードのwidth=”425″をwidth=”100%”に書き換えるでけです。

googlemap可変設定

これでGoogle Mapが画面サイズ(PC Tablet smartphone)によって表示サイズが変わります。

次はアメブロの記事のサイズに合わせてGoogle Mapサイズを自動変更出来る方法を紹介します。

設定の仕方は以前紹介したYouTubeをcssで可変にするトリックで説明してあるコードと同じコードを使います。
すでにアメブロにYouTubeをcssで可変にするトリックできるcssコードを追加している方はここで紹介するcssコードは新たに追加する必要はありません。

それではアメブロの記事のサイズに合わせてGoogle Mapサイズを自動変更出来る方法を紹介していきます。

アメブロの記事のサイズに合わせてGoogle Mapサイズを自動変更

ここで使うコードはCSS: Elastic Videosで紹介されているコードでGoogle Mapサイズを自動変更する方法です。

アメブロはスマートフォン対応になっています。スマートフォンだとGoogle Mapは自動変更されますが、PCではGoogle Mapサイズは自動変更されません。デザインをカスタマイズした際、記事サイズを大きくしたり、小さくしたりすることもあると思います。

Google Mapサイズより記事が小さい場合
Google Mapサイズより記事が小さい場合

cssで可変にするトリックを使うと小さい記事でもそのサイズに合わせて表示されます。
記事サイズにGoogleMapが合う

コードを使っていれば記事サイズを大きくしても、そのサイズに合わせてGoogle Mapサイズが自動変更されます。
記事サイズに合わせてGoogleMapサイズが自動変更

コードは以前紹介したYouTubeをcssで可変にするトリックで説明してあるコードと同じコードを使います。すでにアメブロにYouTubeをcssで可変にするトリックできるcssコードを追加している方はここで紹介するcssコードは新たに追加する必要はありません。

html

htmlコードはGoogle Mapで取得したiframeコードを<div class=”video-container”>~</div>で囲むだけなんですが、囲む箇所がYouTubeと違い一番外側に囲むわけではないので画像で紹介します。下記画像のようにGoogle Mapで取得したiframeコードを<div class=”video-container”>~</div>で囲んでください。

googlemapameコード

続いてcssコードを追加します。

css

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

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

デザインが「CSS編集用デザイン」の場合は「こちらから」css編集にコードを追加してください。
それ以外のデザインはフリープラグインにコードを追加して使います。

これでアメブロをカスタマイズした際、記事サイズが変わってもGoogle Mapサイズも自動変更されるのでとても便利になると思います。

最終更新日: 2013年3月27日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

Google Mapのレスポンシブ ウェブ デザイン対策の関連記事

Google Mapのレスポンシブ ウェブ デザイン対策” への1件のコメント

  1. ピンバック: googleマップの挿入 | studio-0

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*