「GoogleMAPをホームページに載せたい」
「お店までの経路の地図をホームページに簡単に載せたい」
皆さま、こんにちは。
お客様が店舗に迷いなく来られるようにするために、ホームページの地図はとても大切なコンテンツです。駅からの道順や、駐車場の場所もわかりやすい地図を載せておくと親切ですよね。
地図をコピーやスキャンしてホームページに載せるのは著作権的に問題があるので、ホームページの上に載せる地図は自作するかGoogleMAPを埋め込んでみせるかのどちらかが主流です。
私たちが運営するホームページ作成ツールPAGEKitを利用するお客様からもニーズが高く、GoogleMAPを埋め込む「かんたん地図機能」はよく利用されています。
そこで今回は、GoogleMAPのホームページへの埋め込み方についてまとめます。よくホームページで見かけるピンが立っているMAPだけでなく、A地点からB地点の経路を表示するなど、カスタマイズした地図もつくることができます。
- 1カ所のピンが立っている地図
- ルートを表示している地図
- 複数カ所のピンが立っている地図
この３パターンの地図の作り方をご説明します。ぜひ最後まで読んでいただければ幸いです。
※もしお店の場所が間違って登録されているなどGoogleMAPに対して課題を抱えておられる方は、リンクより別記事をまずご参照ください。
GoogleMAPで埋め込み地図作成①Googleマイマップから作業スタート
まずは地図にピンが立っているシンプルなMAPをつくってみます。
地図をホームページに埋め込みたいときは、GoogleMAPの中にある”マイマップ”のページから作業していきます。”マイマップ”から地図をつくり始めると好みにカスタマイズしやすいのでオススメです。
https://www.google.com/maps/d/u/0/
①【Googleマイマップ＞新しい地図を作成＞住所の検索窓】へ進む
まずは自分のお店の住所を検索します。
GoogleMAPにお店情報が登録されていれば、住所を入れるとお店の名前が出てくると思います。
②地図に追加をクリック
住所を検索すると、【地図に追加する】という表示が出てくるので、クリックすることで地図にその場所が登録されます。
地図にお店の情報が登録できたら、あとは公開設定をします。
GoogleMAPで埋め込み地図作成②地図の名前、説明、共有設定を整える
この地図をホームページ上で誰にでも見られる設定にするために、地図に名前を付けて、共有の設定を公開する作業が必要です。
①「無題の地図」→お店の名前へ
初期設定では「無題の地図」という名前になっているので、まずはご自身の店舗名などに変えていきます。お店の説明も書けますのでPRとして書いておきましょう。
②【共有】から地図の公開設定をする
この共有設定を変更しないとホームページに載せるコードが発行されないので、必ず公開設定の修正が必要です。
- このリンクを知っている人なら誰でも表示できる
- インターネットで検索しているユーザーにこの地図を公開する
この2点をONにします。
GoogleMAPで埋め込み地図作成③貼り付けコードをホームページにコピペする
ここまで設定したら、つくった地図はもうホームページに貼り付けることができます。
①地図の「⁝」から【自分のサイトに埋め込む】を選択
地図に自分で付けた名前の欄の横にある縦3点リーダーから、【自分のサイトに埋め込む】を選びます。
②HTMLコードをコピーし、ホームページの管理画面にペースト
コードが出てきますが丸ごとコピーして、ホームページの管理画面にそのまま貼り付ければOKです。
これでピンが立った地図がホームページに掲載されます。
GoogleMAPで埋め込み地図作成④地図上にルートを載せたい
「A地点からB地点まで」の経路を地図上に表示させることもGoogleマイマップ上の作業で可能になります。まずはここまでに説明した方法と同じで、地図を新規作成しておきます。
①検索窓の下の【ルートを追加】をクリック
ピンを立てるのとは違う地図を作成するので、まずはルートを出すために【ルートを追加】を選択しておきます。ルートは車、自転車、徒歩の３パターンが出せます。
例）大阪・御堂筋線本町駅から大阪市役所までの徒歩ルートをつくる場合
ルートを追加＞徒歩と選択し、地点を入力できるA、Bの欄が出てきたらOKです。
②A地点＝スタート、B地点＝ゴール
↑の例では、A＝本町駅、B＝大阪市役所を入力します。
ルートが地図上に表示されたら、地図の名前と公開設定は同じ作業を行い、コードをホームページの管理画面にコピペして完成です。
もっと経由地を出したいときは、A、BのほかC、Dなど追加していけます。交差点がたくさんある場所などは細かく経由地を設定すると、曲がり角が明確になるのでよりわかりやすい地図ができます。
GoogleMAPで埋め込み地図作成⑤複数カ所を1つの地図に載せたい
グループ店舗や近隣駐車場などいくつかのスポットをまとめて地図に掲載することも可能です。個人的にはコインパーキングの場所がまとまった地図がホームページにあるとすごく助かっています。
①検索窓下の【マーカーを追加】から地図に載せたいスポットを登録していく
【地図に追加】を押していくと、どんどん地図にスポットが溜まっていきます。間違ったら削除できます。
【無題のレイヤ】も地図の名前と同じで変更できますので、クリックしてお好みのお名前に変更してください。
ビジュアルも変更できます。例えばピンではなく番号にしたいときは登録するスポットに続き番号を振ることができます。
共有やコードのコピーの仕方はこれまでと同じです。
いくつも地図の上にピンを立てると見えづらいこともあるので、地図の表示範囲や色（デザイン）も変更し、わかりやすい形で仕上げるとより便利な地図になります。
それぞれのスポットをクリックすると、そこからGoogleMAPに飛んで詳細な地図が見られるなど機能はデフォルトの状態でも十分盛り込まれているので、ご活用いただくとホームページがより便利になると思います。
まとめ
GoogleMAPはナビアプリとして使うだけでなく、ホームページを便利にしてくれるツールでもあります。住所指定で簡単にホームページに掲載する地図ができます。お好みにデザインも変えられるなど機能は幅広く揃っているので、ぜひカスタマイズしてホームページにピッタリの地図をつくってみてください。
どうしてもホームページ作りが難しいという場合はページキットにおまかせください。
かんたん３ステップ最短15秒で、業種ごとにぴったりの文章が入ったホームページが作れます。サポートつきで30日間無料でお試しいただけます。
