ノーコードサイトにGoogleマップを埋め込むときの基本

店舗やサロン、教室など、実際の場所を訪ねてもらうサイトでは、住所を文字で書くだけでなく、地図をそのままページに埋め込んでおくと親切です。Googleマップには、指定した場所の地図をそのままWebページに貼り付けられる、埋め込み用のコードが用意されています。

この記事では、埋め込みの基本的な流れと、埋め込む前に確認しておきたいポイントを整理します。

埋め込みの基本的な流れ

Googleマップで表示したい場所を検索し、「共有」から地図を埋め込むための選択肢を選ぶと、埋め込み用のコード（iframeと呼ばれる形式）が発行されます。あとはそのコードを、ノーコードツールの「埋め込み」用のボックスに貼り付けるだけです。

多くのノーコードツールでは、外部のコードをそのまま貼り付けられる専用の部品が用意されています。地図に限らず、動画や他サービスの埋め込みにも同じ仕組みが使われていることが多いので、覚えておくと応用が利きます。

埋め込む前に確認しておきたいこと

貼り付けて終わりにせず、次の3点は公開前に確認しておくと安心です。

• ピンの位置が、実際の住所と一致しているか
• スマートフォンで、地図の上だけ指で操作できるか
• 経路案内は、埋め込みとは別に外部リンクを用意しているか

ピンの位置は、住所検索だけに頼らない

住所をそのまま検索して地図を作ると、ビル名や部屋番号までは反映されず、近くの別の建物を指してしまうことがあります。地図上でピンをドラッグして正しい位置に動かしてから、埋め込み用のコードを取得するようにしましょう。

スマートフォンでは、地図の上のスクロールに注意

埋め込んだ地図の上でページをスクロールしようとすると、ページ全体ではなく地図の拡大縮小として反応してしまうことがあります。特にスマートフォンでは、地図の中だけ指の操作を奪われてしまい、その先の文章に進みにくくなるという声もよく聞かれます。

地図をあまり大きく配置しすぎない、地図の下にも同じ情報（住所・アクセス方法）を文字で書いておく、といった工夫をしておくと、操作に迷った人でも情報にたどり着けます。

経路案内は、埋め込みとは別にリンクも用意する

埋め込んだ地図は、場所を一目で伝えるには十分ですが、そこから実際に道順を調べたい人にとっては、埋め込みの中だけで完結する操作は限られています。

「Googleマップで開く」のような、外部のマップアプリへ直接つながる通常のリンクをあわせて用意しておくと、訪問者は使い慣れたアプリでそのまま経路検索や現在地からのナビを始められます。

まとめ

Googleマップの埋め込みは、コードを貼るだけで手軽に始められる一方、ピンの位置・スマートフォンでの操作性・経路案内という3点は見落とされがちです。公開前に一通り確認しておきましょう。サイトとあわせて整えておきたいGoogleビジネスプロフィールとの連携は、ノーコードサイトとGoogleビジネスプロフィールを連携させる基本でも扱っているので、あわせてご覧ください。