• Articles
• admin

 Note: We now offer a FREE wizard that does this all for you. Click here to configure it and add to your WIX website in seconds. 

このチュートリアルでは、GoogleマップをWixに追加する方法を学びます。 無料と有料の両方のすべてのWixアカウントでGoogleマップを使用できます。 WixウェブサイトにGoogleマップを追加するには、多くの利点があります:

• 場所：Googleマップは、顧客があなたの物理的なビジネスを見つけるのに役立ちます。 あなたのユーザーに方向および相互作用を提供できる。
• 信憑性：あなたの物理的な場所を広告することは、あなたのウェブサイトに信憑性と信頼性を貸します。 それはあなたの聴衆がサイバースペースにだけ存在するフライバイナイトではないことを知ることができます。
• 利便性：すべてのサイト訪問者がGoogleマップで自分の住所を見つけるスキルや忍耐力を持っているわけではありません。 あなたのWixサイトにマップを提供することは、これの必要性をバイパスします。

Wixエディタは、簡単なGoogleマップをすぐにサポートします。 組み込み関数は、スタイルと外観に関しては多くの選択肢を提供しますが、Googleマップで利用可能なすべての機能を提供するわけではありません。

より高度な機能が必要な場合は、WixページにGoogleマップを埋め込むことができます。 これを行うには、Google Mapsサイトでマップを作成し、コードをWix webサイトのページに貼り付けます。

コンテンツ

Wixエディタでの簡単なGoogleマップの追加1

Wixエディタでのサイトへのアクセス1

WixエディタでのGoogleマップの追加3

Googleマップでのアドレスの設定4

Googleマップの動作の設定5

6

Googleマップアドレスのトラブルシューティング6

Googleマップのレスポンシブ化7

WiXページへのGoogleマップの埋め込み9

Googleマップの作成9

WiXページへのGoogleマップコードの埋め込み10

Wixページへの簡単なGoogleマップの追加 エディタ

googleマップをWixウェブサイトに追加するためのステップバイステップガイドに従ってください。 マップを表示するには数回クリックするだけです。

Wixエディタでサイトにアクセスする

Wixエディタでサイトにアクセスするには:

1. Wixアカウントにログインします。
2. 必要に応じて、作業したいサイトを選択します。
3. 管理&サイトの編集をクリックします。

1. サイトマネージャーで、サイトの編集をクリックします。

1. サイトがWixエディタで開きます。

WixエディタでGoogleマップを追加する

でGoogleマップを追加して、Googleマップを追加します:

1. ページを選択します。
   
2. ページ領域をクリックして選択します。
3. >連絡先の追加をクリックし、連絡先の追加ツールのGoogleマップセクションまでスクロールします。
4. 目的のマップスタイルをクリックし、ページにドラッグします。
   
5. ハンドルバーを使用して、ページデザインに合わせてマップのサイズを変更します。
   

マップは動的であり、伸縮するにつれて、ターゲットアドレスの周囲の領域の多かれ少なかれが表示されます。

Googleマップでの住所の設定

マップを追加するときは、Wixオフィスの住所がデフォルトで使用されます。

アドレスを設定するには:

1. マップをクリックすると、コントロールが表示されます。
2. アドレスの変更をクリックします。
3. Googleマップの設定で：
   • あなたの場所は何ですか？:ユーザーが検索する住所または場所を入力し、Enterキーを押します。 Googleマップが住所を認識すると、これを示す緑色の目盛りが表示されます。 問題が発生した場合は、以下のGoogleマップのアドレスのトラブルシューティングを参照してくださ
   • 説明を表示したいですか？:必要に応じて説明を入力します。 このテキストは、赤いピンを指す吹き出しに表示されます。 必要に応じてこのフィールドを無視することができます。

場所を追加できるのは1つだけです。 複数の地図を表示する必要がある場合は、Googleマップを埋め込むことができます。

Googleマップの動作を設定する

訪問者が表示する内容や、Googleマップを操作するときに何ができるかを制御するオプションがいくつかあります。動作を設定するには

:

1. マップをクリックしてコントロールを有効にします。
2. 設定アイコンをクリックします。
   <png>
   
3. Googleマップの設定で、トグルボタンをクリックしてオプションを有効または無効にします。
   • 地図と衛星ビューを表示する:訪問者がビューを切り替えることができる地図|衛星リンクを表示します。
   • ズームコントロールを表示:+アイコンと–アイコンを表示して、ズームインとズームアウトを行います。
   • ストリートビューを表示コントロール:訪問者がGoogleストリートビューを使用できるストリートビューアイコンを表示します。<ストリートビューアイコン。png>
   • ドラッグを許可:訪問者がクリックしてドラッグしてマップを移動できます。
   • ボタンの言語は何ですか？:下矢印をクリックし、必要に応じてドロップダウンから言語を選択します。

Googleマップのアドレスのトラブルシューティング

Googleマップで住所が認識されない場合、または住所が正しく表示されない場合は、”現在地は何ですか”フィー.

あなたの座標を見つけるために:

1. Googleマップhttps://maps.google.co.uk（またはあなたの国と同等のもの）に移動します。
2. 検索ボックスに住所を入力します。
3. 地図上の固定された場所を右クリックし、ここにあるものをクリックしますか？
4. ポップアップに表示される座標をコピーします。
5. Wixページで、エディタのGoogleマップをクリックしてコントロールを有効にします。
6. 設定アイコンをクリックします
7. コピーした座標をWhat’s your locationに貼り付けますか？ フィールド。
   <png>
   

googleマップをレスポンシブにする

シンプルなGoogleマップはデフォルトで静的です。 マップの動作を観察しながら、ブラウザウィンドウを徐々に狭めたり広げたりすることで、これをテストできます。

Googleマップを応答させるには:

1. マップをクリックしてコントロールを有効にします。
2. ストレッチアイコンをクリックします。
   <png>
   
3. ストレッチマップ内：
   • 全幅にストレッチ：これを有効にするには、トグルボタンをクリックします。 マップは、ページの全幅をカバーするように伸びます。
   • 余白:スライダーを使用して、マップの左右に余白を設定します。 ピクセルまたはパーセンテージを使用できます。 最大設定は80pxまたは5%です。
     <stretch-map-dialog.png>
     
4. 応答性をテストするための多くの利用可能なツールがあります。 これは、Google ChromeのレスポンシブツールのiPad Proにマップが表示される方法です。 このツールにアクセスするには、Chromeのその他のツール>開発者ツールに移動します。
   <png>
   

また、[Add>Contact>Full Width Google Maps]から応答性の高いGoogleマップを挿入することもできます。 これは、静的マップを追加してstretch関数を適用するのと同じ効果があります。

<-全角-マップを選択します。png>

WixページへのGoogleマップの埋め込み

Wixエディタですぐに利用できるシンプルなGoogleマップは、ほとんどのウェブサイトに最適なソリューションを提供しますが、Googleマップサイトでカスタムマップを作成するときに可能な完全な機能を提供するものではありません。

すぐに使えるWixソリューションの制限事項には次のものがあります:

• 単一の場所にのみマークできます。
• ストリートビュー画像をレンダリングできません。

Googleマップを最大限に活用するには、Googleマップサイトでマップを作成し、Wixサイトのページにコードを埋め込む必要があります。

Googleマップで地図を作成する

最初のステップは、Googleマップのサイトで地図を作成することです。

Googleマップで地図を作成するには:

1. でGoogleマップを開くwww.maps.google.co.uk （またはあなたの国の同等のもの）。
2. 埋め込みたい地図、ストリートビュー画像、または道順が地図に表示されていることを確認してください。
3. 左上のメニューアイコン<google-maps-menu-iconをクリックします。png>。
4. 共有または埋め込みマップをクリックします。
   <google-maps-share-embed.png>
   
5. [埋め込みマップ]タブを選択し、必要なサイズを選択して、HTML埋め込みコードをコピーします。
   <コピー埋め込みコード。png>
   
6. 今のところメモ帳または同様のプログラムにコードを貼り付けます。 これを使用して、Wixサイトに埋め込まれたマップを表示します。

GoogleマップコードをWixページに埋め込む

次のステップは、Googleマップからコピーした埋め込みコードをページに貼り付けることです。

Wixウェブサイトに埋め込まれたGoogleマップを表示するには:

1. ページを選択し、[Add>More>Embeds]に移動します。
   
2. HTMLコードをページにドラッグします。 これにより、ページにカスタムHTMLコードを追加できます。 <png>
3. コードを入力をクリックします。
   
4. Googleマップからコピーしたコードをここにコードを追加ボックスに貼り付けます。 Wixはコードを検証し、緑色の目盛りで有効であることを示します。
5. 適用をクリックします。
   
6. 埋め込まれたマップがページ上に表示されます。 ページとGoogleマップのサイズに合わせて要素のサイズを変更する必要がある場合があります。
   

私たちは、あなたのWixのウェブサイトにGoogleマップを追加する方法については、このチュートリアルを楽し

多くの新規顧客があなたを見つけて、あなたのビジネスブームを作ることができます。