マップフィールドの使用

フォームに地図を表示して特定の場所を示したり、ユーザーが場所を選択するのを支援したいですか？WPFormsの地図フィールドを使えば、インタラクティブな地図をフォームに直接組み込めます。これによりユーザー体験が向上し、正確な位置情報を提供できます。

このチュートリアルでは、WPFormsの「マップ」フィールドの使用手順を順を追って説明します。

---

始める前に、必ずサイトにWPFormsプラグインをインストールして有効化し、 ライセンスを確認してください。その後、新しいフォームを作成するか、編集のために既存のフォームを開いてください。

ジオロケーションアドオンの設定

マップフィールドを使用する前に、ジオロケーションアドオンをインストールして設定してください。マップフィールドはジオロケーションアドオンの一部であり、他の位置情報機能と同様の設定が必要です。

これらの手順を完了したら、フォームでマップフィールドの使用を開始できます。

1. フォームへのマップフィールドの追加

フォームビルダーの「ファンシーフィールド」セクションにある「マップ」フィールドを探します。マップフィールドをクリックするか、フォームプレビュー領域にドラッグ＆ドロップしてフォームに追加します。

2. マップ位置の設定

マップフィールドを追加後、フォームビルダー内でそのフィールドをクリックしてフィールドオプションパネルを開きます。次に、ロケーションセクションからマップ上に表示される場所を設定します。

住所の追加

まず、アドレス欄に住所を入力してください。

入力すると、Google Placesのデータに基づいた自動補完候補が表示されます。その後、候補リストから目的の場所を選択してください。

住所を選択した後、以下を追加できます：

• 名称:場所のカスタムラベル（例：「本社」「ダウンタウン店」など）
• 説明:場所に関する追加情報。

近くの場所を探す:

「近くの場所を検索」オプションを有効にすると、現在の地理的位置に基づいて住所の自動補完候補を絞り込めます。

有効化すると、ブラウザが位置情報のアクセス許可を求めます。許可が与えられると、提案は近くの場所を優先表示し、周辺地域の住所を簡単に見つけ選択できるようになります。

位置情報の表示:

フロントエンドで地図の下に完全な住所情報を表示するには、「場所の一覧を表示」オプションを有効にしてください。これにより、ユーザーは設定した各場所の名称と住所を表示するリストを確認できます。

3. マップマーカーのカスタマイズ

各場所には、マーカーとしてカスタムアイコンや画像を設定できます。場所セクションで、カスタマイズしたい場所の「アイコン」ドロップダウンを探してください。

アイコン を選択して2000種類以上のFont Awesomeアイコンから選ぶか 、画像を選択してカスタム画像をアップロードしてください。

アイコンを使用する場合は、アイコンフィールドをクリックしてアイコンピッカーを開きます。目的のアイコンを検索して選択してください。

画像を使用する場合は、「画像をアップロード」をクリックしてメディアライブラリを開きます。新しいファイルをアップロードするか、メディアライブラリから既存の画像を選択してください。

マーカーの外観のカスタマイズ

マーカーの色を変更するには、アイコンフィールドの横にあるカラーピッカーをクリックしてください。プリセットカラーから選択するか、カラーピッカーをドラッグして任意の色を選択するか、または16進数のカラー値を直接貼り付けることができます。

マーカーをより目立たせるには、アイコンフィールド横のサイズドロップダウンを使用してください。利用可能なオプションは「小」「中」「大」です。大きいマーカーを使用すると、カスタム位置が地図上の他の位置から際立ちやすくなります。

ズームレベルの設定

ズームレベルフィールドを調整して、マップが最初に読み込まれた際の表示距離を制御します。デフォルト値は15で、これは埋め込みマップの標準的なズームレベルです。

複数の場所が設定されている場合、すべての場所を表示するためにズームレベルが自動的に調整され、この設定は無効になります。

4. 詳細なマップ設定の構成

さらにカスタマイズするには、フィールドオプションパネルの「詳細」タブをクリックしてください。ここでは、マップの外観、ユーザー操作、およびフォーム入力時の表示方法を制御できます。

プレゼンテーション設定

マップ上に表示するGoogle MapsのUI要素を決定します：

• 全画面表示を非表示:ユーザーが地図を全画面モードで表示できるようにする全画面ボタンを非表示にします。
• 地図タイプを非表示:地図タイプ選択ツール（衛星、地形など）を非表示にします。
• 位置情報の非表示:マークをクリックした際に表示される位置情報カードを非表示にします。
• ストリートビューを非表示にする:ストリートビューのコントロールを非表示にします。

これらのオプションの大半は、マップの見栄えをすっきりさせるため、デフォルトでは非表示になっています。

インタラクティブ設定

ユーザーがマップとどのようにやり取りするかを制御します：

• カメラコントロールを非表示:カメラコントロールボタンを非表示にします。
• ズーム表示を非表示:ズームインボタンとズームアウトボタンを非表示にします。
• ドラッグを無効化:ユーザーがマップをドラッグして移動することを防止します。
• マウスズームを無効化:マウススクロールホイールによるズーム操作を防止します。

その他の設定

マップフィールドの動作に関する追加オプション：

• エントリーに表示:フォームのエントリーに地図データを表示します。
• エントリーにサムネイルを表示:フォームエントリー内で地図のサムネイルを表示します。
• ラベルを非表示:フロントエンドでフィールドラベルを非表示にします。

5. 複数拠点の管理

複数の店舗所在地、集荷場所、支社など、単一の地図上に複数の地点を表示する必要がある場合、複数地点機能をご利用ください。この機能により、ユーザーはすべての地点を一度に確認でき、必要に応じて希望の地点を選択できます。

マップに複数の場所を追加するには、フィールドオプションパネルの「場所」セクションにあるプラスアイコン（+）をクリックします。各場所には固有のマーカーアイコン、色、名前、説明を設定できます。

位置情報の選択を有効にする

2つ以上の場所を設定している場合、「場所の選択を許可」オプションを有効にしてください。この機能には以下の要件があります：

• 少なくとも2か所が地図に追加されました。
• 「場所の表示リスト」オプションを有効にする。

このオプションを選択すると、地図の下にラジオボタンが表示され、ユーザーが希望する場所を選択できるようになります。

よくある質問

以下は、WPFormsの地図フィールドの使用に関してよく寄せられる質問への回答です。

地図上で他の店舗や観光スポットを非表示にできますか？

はい。レストランや店舗などのPOI（ポイントオブインタレスト）を非表示にし、カスタムマーカーのみを表示するには、Google Cloud Consoleでカスタムマップスタイルを作成し、コードスニペットを使用してMap Fieldに適用する必要があります。マップのスタイル設定はGoogleのクラウドベースのスタイリング機能で管理されるため、この設定はGoogle Cloud Consoleのダッシュボードで行います。

カスタムマップスタイルをマップフィールドに適用する方法については、開発者向けドキュメントで手順ごとの説明をご確認ください。

以上です！これで、WPFormsの「マップ」フィールドを使って、インタラクティブな地図と正確な位置情報でフォームを強化する方法がわかりました。

次に、既製のテーマでフォームのデザインを手軽に強化してみませんか？フォームへのテーマ適用方法の詳細については、フォームテーマ活用ガイドをぜひご覧ください。