---
schema_version: "1"
id: 4c0b2e8c1253d4c870724999e476499dfccd34e39c95e0cddf5fbd94c73b1848
title: Use Google Maps Autocomplete in LWC Omniscripts (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_use_google_maps_autocomplete_in_lwc_omniscripts.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_use_google_maps_autocomplete_in_lwc_omniscripts.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 8e197b2b3b2f7f7cc3d627cdefc98ca1d2ff0e306cca13fb90012cdacb99122c
description: For the managed package runtime, retrieve Google Maps data and display a location in the Type Ahead Block using the Google Maps API.
products:
  - Omnistudio
release: "264"
---
# Use Google Maps Autocomplete in LWC Omniscripts (Managed Package)

For the managed package runtime, retrieve Google Maps data and display a location in the Type Ahead Block using the Google Maps API.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

Before You Begin

The Type Ahead Block's Google Maps functionality requires you to use a Google Maps API Key. See [Google](https://developers.google.com/maps/documentation/javascript/get-api-key).

1. [Add a Type Ahead Block](https://help.salesforce.com/s/articleView?id=xcloud.os_add_and_configure_a_type_ahead_block.htm&release=264.0.0&type=5 "For the managed package runtime, configure how users can create and edit records in Edit Block.") to your Omniscript.
2. In Type Ahead Block's **Field Label**, enter the text to display in the google maps search field.
    
    ![image](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/lwc_google_typeahead_label.png)
3. Check the **Enable Google Maps Autocomplete** checkbox to display the **Google Maps Autocomplete** section.
4. In the Google Maps API Key field, enter your Google Maps JavaScript API key. If you don't have a Google Maps JavaScript API Key, obtain one from [Google.](https://developers.google.com/maps/documentation/javascript/get-api-key)
5. (Optional) To hide the Google Map widget, check **Hide Map**.
6. Click the Country Filter field and select a Country.
7. Preview the Omniscript to run a search and return a Google response.
8. Open the Action Debugger to view the response. A larger set of response data is available beginning with Vlocity Insurance and Health and Vlocity CME Summer '20.
    
    ![The Google Maps response node in an OmniScript's Action Debugger.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/lwc_typeahead_response.png)
    
    These are the available response nodes:
    
    - Prior to Vlocity Insurance and Health and Vlocity CME Summer '20, the response includes these nodes:
        
        <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
                <colgroup>
                  <col>
                  <col>
                </colgroup>
                <thead class="slds-text-title_caps ">
                  <tr class="">
                    <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d314894e160">
                      <p style="margin-bottom:0;">Response Node</p>
                    </th>
                    <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d314894e166">
                      <p style="margin-bottom:0;">Description</p>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e160 ">
                      <p style="margin-bottom:0;"><strong class="uicontrol">street</strong>:</p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e166 ">
                      <p style="margin-bottom:0;">Returns a street address</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e160 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">locality</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e166 ">
                      <p style="margin-bottom:0;">Returns a city or town</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e160 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">administrative_area_level_1</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e166 ">
                      <p style="margin-bottom:0;">In the United States, this returns a state</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e160 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">administrative_area_level_2</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e166 ">
                      <p style="margin-bottom:0;">In the United States, this returns a county</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e160 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">postal_code</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e166 ">
                      <p style="margin-bottom:0;">Returns a postal code</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e160 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">country</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e166 ">
                      <p style="margin-bottom:0;">Returns a country</p>
                    </td>

                  </tr>
                </tbody>
              </table>
    - Beginning with Vlocity Insurance and Health and Vlocity CME Summer '20, the response includes a larger set of data and the previously available response nodes. Responses return unique sets of data depending on the configuration.
        
        In addition to the default response nodes, this table displays response nodes that may also be available in the Google response. For detailed information on each response node, see [Google Geocoding API](https://developers.google.com/maps/documentation/geocoding/overview#Types) (Google documentation).
        
        <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
                <colgroup>
                  <col>
                  <col>
                </colgroup>
                <thead class="slds-text-title_caps ">
                  <tr class="">
                    <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d314894e312">
                      <p style="margin-bottom:0;">Response Node</p>
                    </th>
                    <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d314894e318">
                      <p style="margin-bottom:0;">Description</p>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">street_address</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">A street address.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">route</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">A named route, e.g., I-5.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">intersection</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">A major intersection.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">political</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">A political entity.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">country</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">A national political entity.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">geometry</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">An object containing longitude and latitude.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">administrative_area_level_1</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">A first-order civil entity below the country level, e.g.,
                        states.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">administrative_area_level_2</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">A second-order civil entity, e.g., counties.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">administrative_area_level_3</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">A third-order civil entity.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">administrative_area_level_4</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">A fourth-order civil entity.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">administrative_area_level_5</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">A fifth-order civil entity.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">colloquial_area</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">A common alternative name for the entity.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">locality</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">An incorporated city.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">sublocality</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">A first-order civil entity below locality. The sublocality
                        may contain additional civil entities in nodes from
                        <strong class="uicontrol">sublocality_level_1</strong> to
                        <strong class="uicontrol">sublocality_level_5</strong>.
                      </p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">neighborhood</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">A neighborhood.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">premise</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">A location, e.g., a building.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">subpremise</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">A first-order entity below a location, e.g., a building.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">postal_code</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">A postal code.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">natural_feature</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">An important natural feature.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">airport</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">An airport.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">park</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">A park name.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">point_of_interest</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">A point of interest, usually an important local entity, e.g.,
                        the Golden Gate Bridge.</p>
                    </td>

                  </tr>
                  <tr class="">
                    <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e312 ">
                      <p style="margin-bottom:0;">
                        <strong class="uicontrol">types</strong>
                      </p>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e318 ">
                      <p style="margin-bottom:0;">An array containing the response's type. For example, San
                        Francisco is a type of locality.</p>
                    </td>

                  </tr>
                </tbody>
              </table>
9. Add an element to the Type Ahead Block to map data from a Google response node. Elements in the Type Ahead Block appear as a selectable **Child Element** in the **Google Transformation** section.
    
    ![An input element in the Type Ahead Block.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/lwc_google_maps_element.png)
10. In the Google Transformations section, click **Add New Mapping**.
11. Select a **Child Element** and map it to a **Google Response Node**.
    
    ![Mapping an element in the Type Ahead Block to a Google Response Node.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/lwc_typeahead_mapping.png)
    
    Refer to the Action debugger's response, and map these additional nested data types by entering the correct notation in the **Google Response Node** field:
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col>
              <col>
              <col>
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d314894e824">
                  <p style="margin-bottom:0;">Response Node</p>
                </th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d314894e830">
                  <p style="margin-bottom:0;">Data Type</p>
                </th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d314894e836">
                  <p style="margin-bottom:0;">Notation Example</p>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e824 ">
                  <p style="margin-bottom:0;">
                    <strong class="uicontrol">geometry</strong>
                  </p>
                </td>

                <td data-label="Data Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e830 ">
                  <p style="margin-bottom:0;">Object</p>
                </td>

                <td data-label="Notation Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e836 ">
                  <p style="margin-bottom:0;">
                    <kbd>geometry:location:lat</kbd>
                  </p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Response Node" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e824 ">
                  <p style="margin-bottom:0;">
                    <strong class="uicontrol">types</strong>
                  </p>
                </td>

                <td data-label="Data Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e830 ">
                  <p style="margin-bottom:0;">Array</p>
                </td>

                <td data-label="Notation Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d314894e836 ">
                  <p style="margin-bottom:0;">
                    <kbd>types|1</kbd>
                  </p>
                </td>

              </tr>
            </tbody>
          </table>
12. Save the Omniscript and run it in preview to view your mappings.