任意のテキストタイプを LocationLookup コンポーネント表示タイプとして定義でき、Google の API を使用して住所データをプルできます。

LocationLookup フィールドコンポーネントの表示タイプは、Google の Places API を活用して、一意の場所の構成と価格設定に使用できる住所データをプルします。レイアウトエディターを使用するか、レイアウト CSV ファイルを直接編集することで、任意のテキストフィールドタイプを LocationLookup コンポーネントの表示タイプとして定義できます。

実際の動作を確認するには、次のビデオをご覧ください。

場所ルックアップフィールドコンポーネントの表示タイプ

LocationLookup フィールドを使用するには、まず Google Place にアクセスする権限を持つ Google からの有効な API キーが必要です。Maps JavaScript API と Places API の両方に対して API キーを設定する必要があります。

フィールドの値には、 key と fieldMapping の 2 つのプロパティが必要です。

{
  "key": API-Key-string,
  "fieldMapping": {"[field1VariableName]":"[returnedPlaceType]","[field2VariableName]":"[returnedPlaceType]"}
}

key プロパティは API キーを参照します。

fieldMapping プロパティを使用して、返された場所データを構成内のさまざまなフィールドにマップするように UI に指示します。このプロパティは、文字列または「キー:値」ペアのオブジェクト (両方の文字列) を取ることができます。

文字列が指定されている場合:

• 文字列は、構成内のフィールドの変数名である必要があります
• API から返されたデータは文字列に変換され、フィールドの値にマップされます

オブジェクトが指定されている場合:

• キーは、構成内のフィールドの変数名になります
• 値は、フィールドにマッピングする必要がある API からのデータへの JSON パスになります

このデータがどのように表示されるかの詳細については、以下を参照してください。 場所の詳細

住所コンポーネントをマッピングすると、これらはさまざまなコンポーネント値のアレイとして返されるため、簡単なパスはありません。UI は次の形式を想定しています。

address_components.[component type]

リストされているすべてのタイプが、場所の詳細 API によって返されることが保証されているわけではないことに注意してください。サポートされているタイプを確認するには、次の Google Web サイトを参照してください。

場所タイプ

フィールド値の例:

{
    "key": "*********",
    "fieldMapping": {
        "formattedAddress": "formatted_address",
        "sublocality": "address_components.sublocality",
        "city": "address_components.locality",
        "stateForLocation": "address_components.administrative_area_level_1",
        "zipCode": "address_components.postal_code"
    }
}

このマッピングはセットでも機能します。場所フィールドと、マッピングにリストされているすべてのフィールドも、セットの一部である必要があることに注意してください。クロスインデックスフィールドまたはグローバルフィールドは、セットではサポートされていません。

Google Places API からの一般的なマッピングには、次のようなものがあります。

• formatted_address (アドレス全体を人間が判読可能な形式で返します)
• address_components.locality (市区町村を返します)
• address_components.administrative_area_level_1 (ステータスを返します)
• address_components.country
• address_components.postal_code
• address_components.street_number
• address_components.route (町名のみを返します)