StudioにGoogleマップを埋め込む方法

店舗やサロン、教室、イベント会場のサイトを作るとき、「アクセス案内にGoogleマップを載せたい」というのは定番の要望です。ところがStudioのどのエレメントを使えばいいのか、地図のリンクをそのまま貼ればいいのか埋め込みコードが必要なのか、迷ってしまう方は多いはずです。せっかく貼ってもスマホで表示が崩れる、というつまずきもよく聞きます。

この記事では、StudioにGoogleマップを埋め込む手順を、地図側での埋め込みコード取得からStudioでの貼り付け、レスポンシブ調整、うまく表示されないときの対処まで順を追って解説します。150名以上が参加するノーコードコミュニティ「ノーコードサロン」に集まる制作現場でも頻出のテーマで、実際につまずきやすいポイントを中心にまとめました。細かなメニュー名は変わることがあるため、考え方から理解できるように説明します。

結論・全体像：地図のiframeをHTML埋め込みボックスに貼る

まず結論からお伝えすると、StudioへのGoogleマップ埋め込みは「Googleマップ側で発行される埋め込みコード（iframe）を、StudioのHTML埋め込み用のボックスに貼り付ける」という流れで実現します。

なぜこの方法かというと、Googleマップは「地図をそのままWebページ内に表示する」ための埋め込みコードを公式に用意しているからです。単なるリンク（URL）を貼ると、クリックで別サイトに飛ぶだけで、ページ内に地図は表示されません。ページの中に地図を「見える形」で載せたい場合は、必ずiframe形式の埋め込みコードを使います。

Studio側には、HTMLやコードを貼り付けるための専用ボックス（埋め込み用エレメント）が用意されています。ここにGoogleマップのコードを貼ることで、ページ内に地図が表示される仕組みです。これは動画やSNSの埋め込みと共通の考え方で、YouTube動画の埋め込み方法と手順の骨格はほぼ同じです。1つ覚えれば他の埋め込みにも応用できます。

たとえばアクセスページに地図を載せておけば、来店客が経路を確認しやすくなり、問い合わせの手間も減ります。ノーコードサロンの制作現場でも、店舗系サイトではアクセス案内の地図はほぼ必須の要素として扱われています。

手順：Googleマップを埋め込む3ステップ

具体的な手順を3ステップに分けて解説します。

ステップ1：Googleマップで埋め込みコードを取得する

まずGoogleマップで、表示したい場所（店舗名や住所）を検索して開きます。次に「共有」の項目を開くと、リンクをコピーするタブと並んで「地図を埋め込む」といった趣旨のタブがあります。こちらを選ぶと、`