STUDIOでGoogleマップを埋め込む方法｜10枚の画像で解説！
飲食店や不動産などの店舗系ビジネスをやっている場合、サイト上にGoogleマップを載せたくなりますよね。
実際ほとんどのサイトでアクセス情報の欄に、Googleマップが表示されています。
今回は、STUDIOでGoogleマップを埋め込む方法について10枚の画像を用いて解説していきます。
初心者でも簡単に実装できる内容になっているので、ぜひこの機会に実装していきましょう！
「Studioの使い方がまだイマイチわかっていない、、、」という方は、以下のマニュアルも参考にしてみてください。
ebook
【無料のお役立ち資料】
ホームページ制作に使える補助金3選
ホームページ制作に補助金を活用すれば、最大450万円の補助が受けられます。
個人事業主や中小企業には使える補助金が多く用意されていますが、まったく知らずに正規の料金プランで作っている方が多く、非常に損をしている状況です。
本資料ではホームページ制作に使える補助金3選をまとめていますので、ぜひ参考にしてみてください！
STUDIOでGoogleマップを埋め込む方法
STUDIOでGoogleマップを埋め込む方法は、下記のとおりです。
- Googleマップで埋め込みコードをコピーする
- Googleマップのボックスを追加する
- Googleマップの埋め込みコードを変更する
10枚の画像を用いて、詳しく説明していきます。
Kaji3分で終わる内容なので、サクッとGoogleマップを埋め込んでしまいましょう！
①：Googleマップで埋め込みコードをコピーする
まずは、埋め込みたいGoogleマップ情報（＝地図情報）を取得していきます。
Googleマップを開きます。
STUDIO上に埋め込みたい場所・住所を入力して、検索マークをクリックします。
Kajiぼくは「JR横浜駅」を埋め込みたいので、検索窓で「JR横浜駅」と入力します！
「共有」ボタンをクリックして、「地図を埋め込む」をクリックします。
そして「HTMLをコピー」をクリックします。
②：Googleマップのボックスを追加する
STUDIOに戻って、左メニュー欄の「右矢印」のボタンをクリックします。
「追加」→「ボックス」→「Googleマップ」をそれぞれクリックします。
下記のように「東京タワー」にピンが刺さったGoogleマップが表示されるはずです。
③：Googleマップの埋め込みコードを変更する
「東京タワー」だと意図どおりではないので、表示したい場所に変更していきます。
Googleマップをダブルクリックします。
右メニュー欄が出てきたら、埋め込みコードに記入されている内容をすべて削除します。
Kaji初期状態だと東京タワーを埋め込むためのコードになっているため！
そして手順①でコピーしておいた地図情報を貼り付けます。
Kaji僕の場合はしっかり横浜駅が表示されています！
STUDIOのサイト制作なら「Terace」にお任せ！
当メディアを運営する私達は、Studioの制作代行サービス「ラク子」を運営しています。
Kaji「デザイナー」と「フロントエンジニア」のフリーランス3名で運営しています！
- ポッキリ価格でホームページを制作できる
- 専属デザイナーが完全オリジナルのデザイン作成
- 納品後1ヶ月間は無料の電話サポートあり
- 自社更新できるホームページが作れる
- ホームページ制作期間中は何度でも無料相談できる
- 顔の出ているフリーランス3人が運営
- 維持費0円でホームページを運営できる
料金プランは、以下の通りです。
ポッキリ価格でホームページが作れるサービスであり、個人事業主や中小企業からよく選ばれています。サービス利用者の声を聞きたい方は、ぜひ以下のインタビュー記事をご覧ください。
今だけ、毎月3組まで制作費用が3万円割引になるキャンペーンを行っています。
先着順で締め切るので、気になる方はぜひお早めにお問い合わせください！
ebook
【無料のお役立ち資料】
初ホームページ制作のよくある質問集
ホームページ制作に関するよくある質問14選にすべて答えています。
「自作するべきなのか」か「Web制作会社に任せるべきか」など、これまでホームページ制作をやっていく中で1番よく受けた質問を厳選しています。
無料でダウンロードできるので、これからホームページを作成する予定の方はぜひ参考にしてみてください！
