Google mapやYoutubeを埋め込む方法
WEBページへマップや動画を埋め込む方法
GooglemapやYoutubeをWEBページへ入れるには挿入したいページを開きます。
Googlemap／Youtube
「共有」→「埋め込む」→「コードをコピー」→「htmlへコードをペースト」
というように簡単ですが、レスポンシブに対応させるためにはCSSで設定をしておく必要があります。
CSSの設定
CSS
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class="ggmap">
コピーした<iframe～>～</iframe>のコード
</div>
01 マップの検索
まずはgoogle Mapのページで地図を検索します。
02 共有ボタンをクリック
地図の左サイドバーにある「共有」をクリックします。
03 地図を埋め込むをクリック
ダイアログが出ますので、「地図を埋め込む」をクリック
04 HTML をコピー
「HTMLをコピー」をクリックでコピーできます。
05 WEBページへペースト
レスポンシブ用の<div class="ggmap">～</div>内にコードをペーストして完了です。
Youtubeも同様です。
HTML
<div class="ggmap">
コピーした<iframe～>～</iframe>のコード
</div>
05 埋め込みサンプル
サンプルは横幅600pxのマップを中央に表示させています。
<map-box>のCSSを作成
<ggmap>をその中に入れる
CSS
.map-box {
margin: 0 auto;
max-width: 600px;
}
HTML
<div class="map-box">
<div class="ggmap">
コピーした<iframe～>～</iframe>のコード
</div>
</div>