Googleマップ活用

GoogleマップをHTMLに埋め込むのは簡単です。

Googleマップの埋め込み

Googleマップへアクセスし、目的の住所を検索、表示された結果に
共有ボタンがあると思いますので、それをクリックします。
すると「リンクを送信する」と「地図を埋め込む」という項目が表示されます。
htmlに埋め込むには「地図を埋め込む」を選択、表示させたい
大きさを選択しHTMLをコピーして貼り付ければよいだけです。
大きさは、小、中、大と任意の固定サイズに設定できます。

リンクを作成するには「リンクを送信する」のURLをリンク先に
設定すればOKです。

Googleマップをレスポンシブに対応させたい

先ほど設定したマップを任意の固定サイズではなく、レスポンシブに
対応させたい場合は、以下の設定をすれば大丈夫です。

HTML

<div class="任意のクラス名">
　<iframe　から始まるコピーしたHTMLを張り付ける
</div>

CSS

.任意のクラス名{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;/*比率16：9の場合　変更したい場合は数値を変えればOK*/
}
.任意のクラス名 iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}