賢威にグーグルマップ(GoogleMap)を埋め込む方法(スマホ表示の幅も合わせる)

この記事は約7分で読めます。

  • LINEで送る

GoogleMapの埋め込み

ブログにGoogleMap動画を埋め込む方法を説明します。
タグを埋め込むだけで完了なので、非常に簡単です。

GoogleMapからタグを取得して貼り付けるだけ

皇居周辺のGoogleMapを埋め込みました。3手順で完了します。
それでは、さっそく貼り付け方を順番に説明します。

GoogleMapを開いて、表示する住所を検索します。

GoogleMapの埋め込み

貼り付けたいMapページの「リンク」ボタンをクリックし、「埋め込み地図のカスタマイズとプレビュー」を開きます。

GoogleMapの埋め込み

「地図のサイズ」を選択、またはカスタムサイズを入力し、コードを取得します。

これで、上記のようにGoogleMapが埋め込まれます。貼り付けたコードは以下です。

<iframe width="600" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.jp/maps?f=q&amp;source=s_q&amp;hl=ja&amp;geocode=&amp;q=%E7%9A%87%E5%B1%85&amp;aq=&amp;sll=36.065178,136.221527&amp;sspn=3.873863,1.919861&amp;brcurrent=3,0x60188c0c0b13f54d:0xb630953beee48188,0&amp;ie=UTF8&amp;hq=&amp;hnear=%E6%9D%B1%E4%BA%AC%E9%83%BD%E5%8D%83%E4%BB%A3%E7%94%B0%E5%8C%BA%E5%8D%83%E4%BB%A3%E7%94%B0+%E7%9A%87%E5%B1%85&amp;t=m&amp;ll=35.684211,139.748154&amp;spn=0.027886,0.051413&amp;z=14&amp;iwloc=A&amp;output=embed&iwloc=B"></iframe><br /><small><a href="https://maps.google.co.jp/maps?f=q&amp;source=embed&amp;hl=ja&amp;geocode=&amp;q=%E7%9A%87%E5%B1%85&amp;aq=&amp;sll=36.065178,136.221527&amp;sspn=3.873863,1.919861&amp;brcurrent=3,0x60188c0c0b13f54d:0xb630953beee48188,0&amp;ie=UTF8&amp;hq=&amp;hnear=%E6%9D%B1%E4%BA%AC%E9%83%BD%E5%8D%83%E4%BB%A3%E7%94%B0%E5%8C%BA%E5%8D%83%E4%BB%A3%E7%94%B0+%E7%9A%87%E5%B1%85&amp;t=m&amp;ll=35.684211,139.748154&amp;spn=0.027886,0.051413&amp;z=14&amp;iwloc=A" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>

サイズは、ブログの幅に合うように選択してください。

スマートフォンでもGoogleMapの幅を収める

GoogleMapの埋め込み

ここでひとつ気をつけることとして、スマホ表示があります。
レスポンシブデザインを採用していると、スマホでGoogleMapが崩れます。

そこで、賢威ではスマホでの表示用にタグがしっかり準備されています。
先ほどのGoogleMapタグを、以下のように囲むだけです。

<div class="v-wrap">
<iframe width="600" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.jp/maps?f=q&amp;source=s_q&amp;hl=ja&amp;geocode=&amp;q=%E7%9A%87%E5%B1%85&amp;aq=&amp;sll=36.065178,136.221527&amp;sspn=3.873863,1.919861&amp;brcurrent=3,0x60188c0c0b13f54d:0xb630953beee48188,0&amp;ie=UTF8&amp;hq=&amp;hnear=%E6%9D%B1%E4%BA%AC%E9%83%BD%E5%8D%83%E4%BB%A3%E7%94%B0%E5%8C%BA%E5%8D%83%E4%BB%A3%E7%94%B0+%E7%9A%87%E5%B1%85&amp;t=m&amp;ll=35.684211,139.748154&amp;spn=0.027886,0.051413&amp;z=14&amp;iwloc=A&amp;output=embed&iwloc=B"></iframe><br /><small><a href="https://maps.google.co.jp/maps?f=q&amp;source=embed&amp;hl=ja&amp;geocode=&amp;q=%E7%9A%87%E5%B1%85&amp;aq=&amp;sll=36.065178,136.221527&amp;sspn=3.873863,1.919861&amp;brcurrent=3,0x60188c0c0b13f54d:0xb630953beee48188,0&amp;ie=UTF8&amp;hq=&amp;hnear=%E6%9D%B1%E4%BA%AC%E9%83%BD%E5%8D%83%E4%BB%A3%E7%94%B0%E5%8C%BA%E5%8D%83%E4%BB%A3%E7%94%B0+%E7%9A%87%E5%B1%85&amp;t=m&amp;ll=35.684211,139.748154&amp;spn=0.027886,0.051413&amp;z=14&amp;iwloc=A" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>
</div>

CSSのスタイルはこのようになっています。
「外観 > テーマ編集」の「mobile.css」で確認できます。

#main-contents .v-wrap{
	position: relative;
	overflow: hidden;
	height: 0;
	padding-bottom: 56.25%;
	padding-top: 30px;
}

#main-contents .v-wrap iframe,
#main-contents .v-wrap object,
#main-contents .v-wrap embed{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

GoogleMapの埋め込み

これで、レスポンシブデザインの表示でもGoogleMapを画面幅におさめて表示できます。

youtube動画の貼り付けでも同様の方法で、レスポンシブデザインで幅を収めて表示できます。
youtube動画を埋め込む詳しい方法は、以下の記事を参考にしてください。

賢威にyoutube動画を埋め込む方法(スマホ表示の幅も合わせる)

  • LINEで送る

コメントを残す

このページの先頭へ