【絶対に間違ってはいけない】WixサイトにGoogle Mapを埋め込む方法

当ページのリンクには広告が含まれています。

Wixサイトに地図を掲載したいんだけどやり方を教えて!

そんな疑問におこたえします。

こんにちはろにぃです。サイト制作を始めてから10年

・月収100万円のサイトを作成、運営
・クライアントのサイトの作成、編集、管理
・SEO相談

などの経験を活かして、サイト制作やSEOについて情報発信をしております。

今回はWixサイトにGoogle mapを埋め込む方法を紹介します。あればなんとなく見栄えが良いから。そんな理由でこの記事にたどり着いた方もいるかと思います。

でも実際にある方法でGoogle mapを導入してみるとわかるんですが、思いがけないメリットがあるんです。

本記事では、

本記事の内容
  • WixサイトにGoogle mapを導入する方法
  • WixサイトにGoogle mapを導入するメリット

について解説していきます。5分でできて、思いがけない成果を得られる。そんなGoogle Mapの活用法をぜひご覧ください!

※本記事の解説画像は最新エディターのWix Studioを用いて解説しています。

※本記事にはプロモーションが含まれます。

目次

WixサイトにGoogle mapを導入する2つの方法

WixサイトにGoogle mapを導入する2つの方法

WixサイトにGoogle Mapを導入するには以下2つの方法があります。

  1. Wixツール Google Mapフォームを使用する
  2. HTMLコードを入力する

順に解説していきます。

1.Wixツール Google Mapフォームを使用する

①Wixツール Google Mapフォームを使用する

WixにはツールとしてGoogle Mapが用意されています。使い方を紹介します。

  1. Wixエディターのサイト編集画面からセクションを追加、要素を追加をクリックする
  2. フォーム>地図>Google Mapの地図から好きなデザインをクリックして追加する
  3. 地図メニューから地図を管理>位置の詳細を入力する
  4. Google Map設定をする
  5. 完了

1-1.Wixエディターのサイト編集画面からセクションを追加、要素を追加をクリックする

(1)Wixエディターのサイト編集画面からセクションを追加、要素を追加をクリックする

1-2.フォーム>地図>Google Mapの地図から好きなデザインをクリックして追加する

(2)フォーム>地図>Google Mapの地図から好きなデザインをクリックして追加する

1-3.地図メニューから地図を管理>位置の詳細を入力する

(3)地図メニューから地図を管理>位置の詳細を入力する

ここでは例として東京タワーを設定しています。

1-4.Google Map設定をする

(4)Google Map設定をする

ここで機能のオン/オフを設定することで、Wixサイト内でオリジナルのGoogle Mapと同じように使えるんです。

1-5.完了

以上で設定は完了です。実際に設置すると以下のように利用できます。

2.HTMLコードを入力する

②HTMLコードを入力する

2つ目はHTMLコードを入力して、Google Mapを埋め込む方法です。HTMLコードと聞くだけで拒絶したくなる人もいると思いますが、ここで必要なのはコピペだけです。

解説しているまま進めてもらえれば難しいことは何もないので安心してください!

  1. Google Mapで登録したい住所を検索する
  2. メニューの概要から共有をクリックする
  3. 地図を埋め込むをクリックし、HTMLをコピーする
  4. セクション、要素を追加するをクリックする
  5. 埋め込み>埋め込みコードを追加する
  6. コードを入力を選択する
  7. サイズ設定をする
  8. 完了

順番に確認しましょう。

1-1.Google Mapで登録したい住所を検索する

(1)Google Mapで登録したい住所を検索する

Wixサイトから一旦離れてGoogle Mapで検索をします。ここでは東京タワーを例に登録します。

1-2.メニューの概要から共有をクリックする

(2)メニューの概要から共有をクリックする

1-3.地図を埋め込むをクリックし、HTMLをコピーする

(3)地図を埋め込むをクリックし、HTMLをコピーする

1-4.セクション、要素を追加するをクリックする

(4)セクション、要素を追加するをクリックする

1-5.埋め込み>埋め込みコードを追加する

(5)埋め込み>埋め込みコードを追加する

1-6.コードを入力を選択し、HTMLコードをペーストして更新する

(6)コードを入力を選択し、HTMLコードをペーストして更新する
(6)コードを入力を選択し、HTMLコードをペーストして更新する2

1-7.サイズ設定をする

このままだと動画のように一定のサイズまでしか表示されません。PCでみると可哀想な感じになってしまいますよね。

HTMLコードを編集することで解決できます。編集と言っても一部の数字を変えるだけ。

WixサイトへGooglemapを導入するHTMLコード編集

width=地図の幅、height=地図の高さの数字を変更します。ここではWix Studioのデフォルトデスクトップの幅1280px、高さは720pxに設定しています。

1-8.完了

WixサイトにHTMLコードでGoogle Mapを導入した完成形

違和感ないサイズに設定できてますよね?

あとはお好みでサイズを調整してみてください。

WixサイトにGoogle Mapを導入するメリット

WixサイトにGoogle Mapを導入するメリット

WixサイトにGoogle Mapを導入することで得られるメリットは以下の4つ。

  1. 無料で使える
  2. 設置が簡単
  3. 自動的に更新される
  4. 口コミが表示される

順番に見ていきましょう。

1.無料で使える

①無料で使える

Google Mapに費用は一切かかりません。飲食店ならグルメサイトに掲載料を払って紹介してもらったりしますよね?でもGoogle Mapは無料で使えます。

無料であなたのサービス拠点まで案内してくれるんだから使わない手はないですよね。

2.設置が簡単

②設置が簡単

WixサイトへのGoogle Map設置は紹介した通り非常に簡単。

やり方がわかっていれば5分で設置できてしまうのでためらう必要もないですよね。

3.自動的に更新される

③自動的に更新される

WixサイトにGoogle Mapを導入する際、紹介した方法で導入してもらえれば自動で更新されます。

周辺状況が変わってもこちらで更新する必要はありません。一度設置したらあとは放置でいいんです。

4.口コミが表示される

④口コミが表示される

ぼくはこれがWixサイトにGoogle Mapを導入する最大のメリットだと思っています!

WixサイトにGoogle Mapを導入する方法でHTMLを選んだ場合、住所だけでなく口コミも一緒に表示されます。

Google Map口コミ

サイトコンテンツで思いっきりあなたのサービスのアピールをすると思いますが、Google Mapの口コミによってそのアピールの説得力が増すわけです。

良い口コミが獲得できているならGoogle MapはHTML入力で導入しよう

良い口コミが獲得できているならGoogle MapはHTML入力で導入しよう

あなたのサービスがGoogle Mapで良い口コミを獲得できているならば、うまく使った方がいいですよね?第3者からの口コミが良ければ、それだけであなたのサービスの信頼度が増すわけです。

サイトに「お客様の声」などで第3者評価を掲載することはできるものの、掲載するのはあくまであなた。直接投稿されるGoogle Mapの口コミの方が信憑性が高いと捉えられるんです。

良い口コミを獲得できているのに、WixツールにGoogle Mapがあるからといって、口コミ表示がされない方法を選んでしまってはもったいなさすぎる!

良い口コミが獲得できているのであればWixサイトにはGooglemapをHTMLコードで埋め込む。使える強みはうまく活用してサイト価値を高めていきましょう!

その他Wixサイトの価値を高めるための施策に関する記事はこちら↓

▶ 【必見】Wixサイトに使いたくなる編集テクニック10選

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次