GoogleMapsの地図をWebページへの埋め込みは、

  1. GoogleMapsで埋め込みたい地図のコードを取得する
  2. 地図コードをHTMLファイルに書き込む

の手順で実現できる。

1. GoogleMapsで埋め込みたい地図のコードを取得する

  • GoogleMaps (https://www.google.com/maps) にアクセスする。
  • 住所や建物名を入力するなどして目的地にピンを立てる。
  • 画面右下の歯車アイコンをクリックし、「地図を共有または埋め込む」を選択する。
  • 「地図を埋め込む」タブから地図の大きさと初期位置を決定し、<iframe> で始まるコードをコピーする。

2. 地図コードをHTMLファイルに書き込む

  • 地図を表示したいWebページのHTML文書に、地図コードを貼り付ける。
  • レスポンシブWebデザインに対応させるには、適当なwrapperを定義して、以下のようなCSSを設定する。

HTML

<div class="gmaps">
    <iframe src="埋め込みたい地図のURL"></iframe>
</div>

CSS

.gmaps {
position: relative;
padding-bottom: 40%;
padding-top: 40px;
height: 0;
overflow: hidden;
}

.gmaps iframe,
.gmaps object,
.gmaps embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
以下の情報を参考にさせていただきました。