GoogleMaps(地図)を埋め込む②ページの幅に合わせる(レスポンシブ)


GoogleMapsをレスポンシブ対応に

先日の「GoogleMaps(地図)を埋め込む」では、スマホやタブレットで見たときに横幅がはみ出している事に気付く
そこでスマホでの表示やブラウザのサイズを変更しても画面の横幅に自動で合わせるようにGoogleMapsをレスポンシブにしたい。

GoogleMapsレスポンシブ対応にする3つの方法

  1. 外部サイトを利用してコードを貼り付ける
  2. WordPressプラグインをインストール
  3. HTML&CSSに変更を加える

外部サイトを利用してコードを貼り付ける

まずは昨日書いた記事「GoogleMaps(地図)を埋め込む」の手順でコードを取得

GoogleMaps6
次に、embedresponsively.comにアクセス
embedresponsively
始めに上部ナビゲーションメニューからGoogl Mapsをクリック
続いてGoogle Maps iFrame Embed:にGoogle Mapsで取得したコードを貼り付けた後、横の「Embed」ボタンをクリック
すると、下部Embed code:にコードが出来るのでコピーする。
あとは記事投稿画面に戻りテキストモードで地図を表示したい場所にペーストする。
この方法でYoutubeなどの画面もレスポンシブ対応にさせる事が出来る

WordPressプラグインを利用する

simplemap-capture

Simple Map
WordPressのプラグイン「Simple Map
こちらの作者様のサイトで詳しく書かれている

プラグインインストールし有効にした後、地図を表示したい場所に以下のショートコードを記述するだけ!
[map addr=”宮城県仙台市青葉区中央1”]
倍率変更も可能
[map addr=”宮城県仙台市青葉区中央1” zoom=”15″]

HTML&CSSに変更を加える

[html]
<div class="googlemaps">
<iframe src="<a href="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" target="_blank" rel="noreferrer">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</a>" width="600" height="450" frameborder="0" style="border:0">
</iframe>
</div>
[/html]

貼り付けたマップコードをdivクラス名を付けて囲む

続けてCSSに以下を加える

縦横比の変更はpading-bottomの%数値変更


この投稿へのコメント

コメントはありません。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL