予約ラボでは「予約」に関する独自リサーチ、体験取材などの情報を配信中

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

Googleマップの埋め込み方法

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

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

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

Google Mapを開く

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

埋め込み用のタグを取得

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

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

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

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

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

メールにもアクセス地図を載せよう!
案内メールで開催場所を地図でも案内できると、所在地の確認が簡単になって便利!
そんなときはGoogleマップの地図URLを使ってリンクさせましょう。リンク用の地図URLを取得するには、「地図を共有または埋め込む」を表示し「リンクを共有」を選択。長いURLだと不便なので「短縮URL」にチェックを入れて短いURLを使うといいですね。

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

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

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

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

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

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

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

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

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

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

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

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

この記事の著者、最近書いた記事

内山 美由紀

株式会社リザーブリンク マーケティング担当。予約システムの評価と検証業務も兼務し、予約を「使う人」と「創る人」の橋渡しをしている。プライベートでは子供たちのスポーツ活動の応援が一番の楽しみ。

カテゴリから探す

予約ラボについて