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

来訪者を店舗や拠点のいずれかに案内したいとき、「どうやってそこに行けばいいのか？」というシンプルな疑問に答える手助けをしましょう。

店舗を運営していたり、物件を掲載していたり、イベントを開催している場合、その疑問を来訪者が尋ねる前にウェブサイトで答えておくべきです。「お問い合わせ」ページや「所在地」ページにわかりやすい地図があれば、迷いを減らし、実際の所在地を明確に示せます。難しいのは、ありきたりなテンプレートのように見えず、デスクトップでもモバイルでもきちんと機能する地図を用意することです。

Wixサイトの運営者には主に3つの方法があります。Wixネイティブの地図要素、Wix App Marketの地図アプリ、または無料の埋め込み可能なウィジェットです。ここでは、それぞれの仕組みと、それぞれの弱点を解説します。

方法1：Wixネイティブの地図要素またはHTML埋め込みボックスを使う

Wixには、Googleマップの要素が標準で備わっています。それをページ上にドラッグし、住所を入力すると、Wixがピンを追加します。中には、これを使わずにGoogleマップの生の埋め込みコードをHTML埋め込みボックスに貼り付けるサイト運営者もいます。

ネイティブの地図を追加するには（Wixヘルプセンターより）：

1. Wixエディタで、要素を追加をクリックし、次にお問い合わせ＆フォーム、続いて地図または全幅の地図をクリックします。地図をページ上にドラッグします。

2. 所在地を管理をクリックし、1か所または複数を選択して、住所、タイトル、短い説明を入力します。

3. デザインアイコンをクリックして、カラーテーマとピンのスタイルを選ぶか、独自のピンをアップロードします。

弱点：

• 所在地情報が乏しい。各ピンには、タイトル、短い説明、リンク1つしか付けられません。検索ボックス、カテゴリーフィルター、営業時間、拠点ごとの写真はありません。
• プリセットのみ。カラーテーマとピンは変更できますが、Wixが用意した選択肢の範囲内に限られます。
• 埋め込みはレスポンシブではない。GoogleのiframeをWixのHTML埋め込み要素に貼り付けた場合、Wixは埋め込みコードが元々レスポンシブであってもレスポンシブにはならないと記しています。サイズを調整し、モバイルでの表示を確認する必要があります。

方法2：Wix App Marketの有料地図アプリをインストールする

ネイティブ要素では洗練されたレイアウトや複数拠点のレイアウトに対応できない場合、一般的な回避策は、ストアロケーターなどWix App Marketのサードパーティ製アプリを利用することです。

地図アプリをインストールするには：

1. Wix App Marketを開き、「ストアロケーター」または「Googleマップ」で検索します。

2. 選んだアプリのサイトに追加をクリックし、権限を承認します。

3. アプリのダッシュボードを開き、所在地を追加して、地図の見た目をカスタマイズします。

弱点：無料プランは制限されがちで、料金はアプリによって異なります。以下の例は現在のApp Marketの掲載情報に基づいており、変更される可能性があります。

• Map & Store Locatorは、1拠点かつ地図表示回数100回までに制限され、ウォーターマークが付く無料プランを掲載しています。有料プランは月額2ドルからです。
• Store Locatorは従量制の料金を採用しており、3日間の試用期間の後、月額7.50ドルからとなります。
• Google Map by MakkPressは7日間の無料試用を提供しており、有料のGrowプランでは月間のページビューが無制限になります。

住所が1つで予算も控えめであれば、わずかな月額料金で十分かもしれません。ただし、契約する前に表示回数の上限とウォーターマークの条件を必ず確認してください。

方法3：無料でカスタマイズ可能なGoogleマップウィジェットを追加する（おすすめ）

カスタムスタイルや複数拠点に対応し、月額のアプリ料金もかけたくないなら、JotformのGoogleマップウィジェットを検討する価値があります。所在地をビジュアルに設定し、埋め込みコードをコピーして、Wixの標準的なHTML埋め込み要素に貼り付けるだけです。

最初に1つ条件があります。このウィジェットには、ご自身のGoogleマップAPIキーが必要です。Jotformの設定ガイドでキーの入力場所を解説しており、GoogleはAPIキーの取得方法を説明しています。Google Maps Platformの料金は従量制のため、想定されるトラフィックに基づいて現在の規約を確認してください。

ウィジェットを追加するには：

1. JotformのGoogleマップウィジェットのページにアクセスし、Googleマップウィジェットエディタまでスクロールします。ウィジェットプロパティのパネルで、GoogleマップAPIキーを貼り付け、所在地を追加します。

2. 地図のスタイル（テーマ、レイアウト、ズームレベル、検索ボックス、カテゴリーフィルター、ルート案内ボタン）を設定し、公開をクリックして埋め込みコードをコピーします。

3. Wixエディタで、要素を追加をクリックし、次にコードを埋め込む、続いてHTMLを埋め込むをクリックします。コードを入力をクリックしてコードを貼り付け、適用をクリックします。サイトを公開します。

Wixサイトに適している理由：

• 不動産業者は、複数の物件を1ページ上に地図表示し、来訪者がカテゴリーで絞り込めるようにできます。
• イベントプランナーは、会場、駐車場、受付をそれぞれ独自の詳細情報付きでピン留めできます。
• 複数の支店を持つ地域密着型ビジネスは、各支店の営業時間、電話番号、「ルート案内」リンクを表示できます。これはWixのネイティブ地図では提供されていません。

このウィジェットはWixのHTML埋め込み要素の中で動作するため、モバイルでも簡単に表示を確認しておきましょう。Wixはモバイルエディタで埋め込みを調整する方法を説明しています。また、デスクトップとモバイルで別々にウィジェットのオン・オフを切り替えることもできます。

プラットフォーム自体について詳しくは、JotformのWixウェブサイトビルダーガイドおよびJotformのWix連携をご覧ください。WordPressサイトも運営している場合は、同じウィジェットについてWordPressにGoogleマップを埋め込む方法で解説しています。

スマートでサーバーレスなウィジェットでWixサイトを強化する

来訪者が店舗やオフィスにたどり着けるようにすることは、成果を生むサイトのほんの一部に過ぎません。無料ウェブサイトウィジェットのディレクトリでは、同じコピー＆ペーストの埋め込み方式を使って、Wixでよくある他の不足点もカバーしています。

• お問い合わせウィジェット：地図の横でメッセージや折り返し連絡の依頼を受け付けます。
• Googleレビューウィジェット：所在地の隣に顧客からの評価を表示します。
• イベントカレンダーウィジェット：今後のイベントを登録リンク付きで一覧表示します。
• 予約受付ウィジェット：来訪者が店舗を見つけたらそのまま予約できるようにします。

予算は、インタラクティブな地図の月額料金に充てるよりも、ビジネスの成長に使うほうが賢明です。まずはJotformのGoogleマップウィジェットから始め、サイトの成長に合わせてウィジェットを追加していきましょう。