ホームページやブログにGoogle地図を埋め込む方法
TAGS: googleマップGoogle地図google地図埋め込みHTMLホームページホームページ地図埋め込み地図埋め込み地図埋め込み方法

 

今回は、HTML内にGoogle地図を埋め込む方法の備忘録としてまとめてみました。

 

行きたいカフェやお店に初めて行く時に、大多数の人がお店の住所から地図アプリなどを開いて検索します。

ホームページやブログでお店の住所だけのせるのもありですが、地図が視覚的に見れたほうが大体この場所だなとわかりますよね。

 

カフェや洋服店のブログを閲覧していると閲覧したユーザーさんが見やすいように

ホームページにGoogle地図が埋め込まれていますよね!?(下記は新宿アルタの例)

ホームページ内にGoogle地図を埋め込むって動的に何かやる必要があるのかな?難しそうだな?と思い調べてみました。

すると、意外と簡単にGoogle地図が埋め込める事が解りました。

 

 

Google地図をホームページに埋め込む手順はこちら↓

google地図をホームページ、ブログ(HTML)に埋め込む方法

 

1.目的の住所をGoogleで検索します。(今回は例として東京都のサッカースタジアム「味の素スタジアムの場所」です)

google地図‗味の素スタジアム

 

2.左上の三本線にマウスを乗せるとメニューと表示されるのでクリックします。

google地図‗味の素スタジアム

 

3.メニューより「地図を共有または埋め込む」を選択します。

google地図‗味の素スタジアム

 

4.新規に下記の画面が表示されるので「地図を埋め込む」をクリックします。

→ <iframe ~ から始まるリンクが表示されるので文字列を全選択してリンクをコピーします。

google地図‗味の素スタジアム

※ホームページ上の大きさはリンク文字列の左側で「大」「中」「小」など切り替えられます。

 

 

 

5.自分のブログやホームページにいき、先ほどコピーしたリンクを貼り付けるだけでGoogle地図が表示されます。

 

 

 

 

【番外編】貼り付けたGoogle地図の大きさを微調整したい場合の変更方法

Google地図で貼付けてホームページ上に埋め込んだ後、地図を横長にしたいなど要望が出てくるかもしれません。

変更方法は、リンクコピー文字列で貼り付けたiframe タグ内のWidth(横幅)とheight(縦幅)を変更するだけです。

 

下記は、横幅”600″,縦幅”450″から変更して横幅”400″,縦幅”250″にした例です。

 

変更前のリンク文字列
<iframestyle=”border:0;”src=”https://www.google.com/maps/embedpb=!1m18!1m12! ~省略~ width=”600″ height=”450″  ~省略~ </iframe>

 

変更後のリンク文字列
<iframestyle=”border:0;”src=”https://www.google.com/maps/embedpb=!1m18!1m12! ~省略~ width=”400″ height=”250″  ~省略~ </iframe>

 

 

ホームページ上にGoogle地図を埋め込んで、WEBサイトを見たユーザーに親切にご案内が出来ます。

もしかすると、地図を探す操作がめんどくさくなって大事なお客様を1人失っちゃうという事もあるかもしれません。

店舗情報やアクセスを記載したい方は是非Google地図を埋め込んでみましょう!

Author