Googleマップをホームページに埋め込む

Googleマップの仕様が変わったので新規のページを作成しました2016.0704

Googleマップをホームページに埋め込む(新仕様)



ここより下は旧仕様です。
Googleマップを起動する。
Googleマップ
https://www.google.co.jp/maps/@35.4006885,139.375825,10z?hl=ja

右下に印があるのでここをクリックする。

下図のマイプレスをクリックする


下図のような画面が現れるので、検索する住所を入力して場所を決定する。その後印をクリックする。


右側に表示されたウェブサイトへの地図の埋め込み用HEMLコード、これを選択(青い色)してコピーする。(この図は白くなっている)<iframeで始まっているコード、これは長い長いコードです。


コピーしたHTMLコードです。


次にホームページビルダで、地図をホームページに埋め込みます。下図のように埋め込みたい位置にカーソルを置きます。


次にHTMLソースタブを押してHTMLソースを観ると、上記で行ったカーソル位置に<td>|<td>黄色があります。ここにGoogleでコピーしたHTMLコードを貼り付けます。「編集」→「貼り付け」します。

 

下図がHTMLコードを貼り付けたところです。


「ページ編集」タブをクリックすると下図のような画面が現れてマップの埋め込みは完了です。ここで作成中のhtmlファイルを保存します。


保存した後、「プレビュー」タブをクリックするとGoogle地図が表示されます。
<iframe>タグを使ったページの挿入でマップを挿入しました。また貼り付けたHTMLコードの幅、高さの数値を変更すると表示される地図の大きさが変わります。例: width="420" height="350"


実際に貼り付けたマップを下記に表示してみました。


大きな地図で見る
戻る