Google mapをホームページに埋め込み！アクセス地図を簡単設置

ホームページにアクセスマップを設置しよう

ホームページやブログなどWebサイトにレッスンやイベント会場へのアクセス地図を表示したいっ！そんなとき、Googleマップ上に住所がピン表示された地図を、とっても簡単にWebサイトに埋め込みできます。コピー＆ペーストだけで初心者でもカンタンに地図が設置できる方法をご紹介します。

Google Mapから埋め込む地図情報を取得しよう

Google Mapを開く

Google Mapにアクセスします。
左上にある検索欄に、ピン表示させたい場所の住所を入力して検索します。

埋め込み用のタグを取得

表示させたい場所にピンが立っていることを確認します。
それでは、地図情報のタグを取得しましょう。左上にあるメニュー「 〓 」をクリック。

メニューから「地図を共有または埋め込む」をクリックします。

ポップアップが表示されるので、「地図を埋め込む」を選択します。
このまま表示されたインラインフレームタグをコピーしてもOKです。

Webサイト上に埋め込み設置したときの表示サイズを指定することもできます。左側の「▼」をクリック、「カスタムサイズ」を選択します。

表示サイズを指定したら、下に表示される「<iframe 」から始まる埋め込み用のタグをコピーします。
これでWebサイトにGoogleマップを埋め込みするための情報が取得できました。

メールやSNSでもアクセス地図を案内しよう！

案内メールで開催場所は重要な情報ですね。住所と地図を合わせて案内すれば、所在地の確認が簡単になって便利！

案内メールやSNS上で場所をお知らせしたいときは、Googleマップの地図URLをリンクさせましょう。リンク用の地図URLを取得するには、「地図を共有または埋め込む」を表示し「リンクを共有」を選択。長いURLだと不便なので「短縮URL」にチェックを入れて短いURLを使うといいですね。
予約確認メールで地図URLを活用する方法や確認メールメールテンプレートについては「予約確認メールにアクセス地図は必須！顧客の行動に即したメールが心も掴む！」を参考にしてください。

Google MapをWebサイトに埋め込みしよう

地図を貼り付けるWebページを用意

GoogleMapの埋め込みタグをWebサイトに設置します。ホームページ作成に使用しているツールがある場合は、そのシステムの仕様により入力方法が異なります。

iframe用の入力フォームが用意されている場合は、そこに埋め込み用のタグを登録します。

リッチエディタの場合は、「HTMLコード編集モード」から入力します。ページ内の貼りつけたい位置に埋め込み用のタグをペーストします。

ホームページに地図が表示

ホームページにgoogleマップが表示されましたね！

スマホでも、Google Mapのサイズは自動で最適化

埋め込みしたGoogle Mapは、スマートフォンで表示した場合も自動でリサイズされ、最適なサイズで表示されます。

スマホでホームページに埋め込まれたGoogleマップは、地図部分だけの操作ができて、とっても便利です。

スマホでホームページに埋め込まれたGoogleマップの上を1本指でスクロールしても、埋め込み地図はスクロールせず、ページ全体をスクロールできるようになっています。
埋め込み地図を拡大・縮小したり、スクロールしたい場合は、2本指で操作。地図上にも「地図を移動させるには指2本で操作します」とメッセージが表示されます。

これって、サイトを見ててページの下の方を見たいのに、地図が埋め込まれていると地図が動いちゃうっていう、スマホ操作時のちょっとしたストレスですね（同感の人いますよね？）。この仕様は、めっちゃ便利！地図を頼りに訪問してくれるお客様も、Googleマップなら迷子になる可能性が減るかもしれませんね（笑）。