AI要約
特定の場所を示す地図をフォームに表示したり、ユーザーが場所を選択するのを支援したりしますか？ WPForms の地図フィールドを使用すると、インタラクティブな地図をフォームに直接統合でき、ユーザーエクスペリエンスを向上させ、正確な位置データを提供します。
このチュートリアルでは、WPForms の地図フィールドの使用方法を順を追って説明します。
要件:
- ジオロケーションアドオンにアクセスするには、Proライセンスレベル以上が必要です
- ジオロケーションアドオンの最小必要バージョンを満たすために、WPFormsの最新バージョンがインストールされていることを確認してください
開始する前に、サイトに WPForms プラグインをインストールして有効化し、ライセンスを認証してください。次に、新しいフォームを作成するか、編集する既存のフォームを開きます。
ジオロケーションアドオンの設定
地図フィールドを使用するには、ジオロケーションアドオンをインストールして構成する必要があります。地図フィールドはジオロケーションアドオンの一部であり、他のジオロケーション機能と同じセットアップが必要です。
これらの手順が完了したら、フォームで地図フィールドの使用を開始できます。
1. フォームへの地図フィールドの追加
まず、フォームビルダーの「Fancy Fields」セクションで地図フィールドを見つけます。地図フィールドをクリックするか、フォームプレビューエリアにドラッグアンドドロップしてフォームに追加します。
2. 地図の場所の設定
地図フィールドを追加したら、フォームビルダーでクリックしてフィールドオプションパネルを開きます。次に、場所セクションで、地図に表示する場所を構成します。
住所の追加
まず、住所フィールドに住所を入力します。
入力すると、Google Places データに基づいてオートコンプリートの候補が表示されます。次に、候補リストから目的の場所を選択します。
住所を選択した後、以下を追加できます：
- 名前: 「本社」や「ダウンタウン店」などの場所のカスタムラベル。
- 説明: 場所に関する追加情報。
近くの場所の検索:
現在の地理的位置に基づいて住所のオートコンプリート候補をフィルタリングするには、近くの場所を検索オプションを有効にします。
有効にすると、ブラウザは位置情報へのアクセス許可を要求します。許可が付与されると、候補は近くの場所が優先され、近隣の住所の検索と選択が容易になります。
場所情報の表示:
フロントエンドの地図の下に完全な住所情報を表示するには、場所リストを表示オプションを有効にします。これにより、ユーザーは設定した各場所の名前と住所を示すリストを表示できます。
3. 地図マーカーのカスタマイズ
各場所には、カスタムアイコンまたは画像を表示できます。場所セクションで、カスタマイズしたい場所のアイコンドロップダウンを見つけます。
アイコンを選択して 2000 以上の Font Awesome アイコンから選択するか、画像を選択してカスタム画像をアップロードします。
アイコンを使用する場合は、アイコンフィールドをクリックしてアイコンピッカーを開きます。目的のアイコンを検索して選択します。
画像を使用する場合は、画像をアップロードをクリックしてメディアライブラリを開きます。新しいファイルをアップロードするか、メディアライブラリから既存の画像を選択します。
マーカーの外観をカスタマイズする
マーカーの色を変更するには、アイコンフィールドの横にあるカラーピッカーをクリックします。プリセットカラーから選択するか、カラーピッカーをドラッグして任意のカラーを選択するか、または16進カラー値を直接貼り付けることができます。
マーカーをより目立たせるには、アイコンフィールドの横にあるサイズドロップダウンを使用します。利用可能なオプションは、小、中、または大です。大きいマーカーは、カスタムの場所を地図上の他の場所から際立たせるのに役立ちます。
ズームレベルの設定
ズームレベルフィールドを調整して、地図が最初に読み込まれたときの表示倍率を制御します。デフォルト値は15で、埋め込み地図の標準的なズームレベルです。
複数の場所が構成されている場合、ズームレベルはすべての場所を表示するように自動的に調整され、この設定は無効になります。
4. 高度な地図設定の構成
追加のカスタマイズについては、フィールドオプションパネルの詳細タブをクリックします。ここでは、地図の外観、ユーザーインタラクション、およびフォームエントリでの表示方法を制御できます。
表示設定
地図に表示するGoogle Maps UI要素を決定します。
- フルスクリーンを非表示: ユーザーが地図をフルスクリーンモードで表示できるようにするフルスクリーンボタンを非表示にします。
- 地図タイプを非表示: 地図タイプセレクター（衛星、地形など）を非表示にします。
- 場所情報を非表示: マーカーをクリックしたときに表示される場所情報カードを非表示にします。
- ストリートビューを非表示: ストリートビューコントロールを非表示にします。
これらのオプションのほとんどは、よりクリーンな地図表示を提供するためにデフォルトで非表示になっています。
インタラクティブ設定
ユーザーが地図とどのように対話するかを制御します。
- カメラコントロールを非表示: カメラコントロールボタンを非表示にします。
- ズームを非表示: ズームインおよびズームアウトボタンを非表示にします。
- ドラッグを無効にする: ユーザーが地図をドラッグして移動することを防ぎます。
- マウスによるズームを無効にする: マウスのスクロールホイールによるズームを防ぎます。
注意: ドラッグを無効にするとマウスによるズームを無効にするは、一度に1つしかアクティブにできません。
その他の設定
地図フィールドの動作に関する追加オプション:
- エントリに表示: フォームエントリに地図データを表示します。
- エントリにサムネイルを表示: フォームエントリに地図のサムネイルを表示します。
- ラベルを非表示: フロントエンドのフィールドラベルを非表示にします。
5. 複数の場所の処理
複数の店舗の場所、ピックアップポイント、支店など、単一の地図上に複数のポイントを表示する必要がある場合は、複数の場所を使用します。この機能により、ユーザーはすべての場所を一度に確認し、必要に応じて希望の場所を選択できます。
地図に複数の場所を追加するには、フィールドオプションパネルの場所セクションにあるプラスアイコン（+）をクリックします。各場所には、独自のマーカーアイコン、色、名前、説明を付けることができます。
場所選択を有効にする
場所を2つ以上設定している場合は、場所選択を許可するオプションを有効にしてください。この機能には以下が必要です：
- マップに少なくとも2つの場所が追加されていること。
- 場所リストを表示するオプションが有効になっていること。
このオプションを使用すると、マップの下にラジオボタンが表示され、ユーザーがお好みの場所を選択できるようになります。
注意: 複数の場所が存在し、場所選択が有効になっている場合、マップのズームレベルはすべての場所を表示するように自動調整され、手動ズームレベル設定は無効になります。
よくある質問
これらは、WPFormsのマップフィールドの使用に関してよく受ける質問への回答です。
地図上の他のビジネスや関心のある地点を非表示にできますか？
はい。レストランや店舗などの関心のある地点（POI）を非表示にして、カスタムマーカーのみを表示するには、Google Cloud Consoleでカスタムマップスタイルを作成し、コードスニペットを使用してマップフィールドに適用する必要があります。マップのスタイリングはGoogleのクラウドベースのスタイリング機能を通じて管理されるため、この設定はGoogle Cloud Consoleダッシュボードで行います。
ステップバイステップの説明については、マップフィールドにカスタムマップスタイルを適用するに関する開発者向けドキュメントをご覧ください。
これで、WPFormsのマップフィールドを使用して、インタラクティブなマップと正確な位置情報でフォームを強化する方法がわかりました。
次に、既製のテーマを使用してフォームのデザインを簡単に強化したいですか？詳細については、フォームテーマの使用方法に関するガイドをご覧ください。これらのテーマをフォームに適用する方法の詳細がすべて記載されています。