How to Enable Search Autocomplete for Map Field Block
In this tutorial, we explain how to create a form that allows you to select an address from a drop-down list of the proposed five addresses and display a picked location on a map via the Map Field.
In particular, we exemplify creating a form that allows choosing a delivery address while placing an order. For better usability, we will insert this form onto a pop-up, which will be opened if clients press a button to order a needed product.
Receive the API Key
Navigate to Google Maps Platform. After confirmation of your Google Account, you will be redirected to the Google Cloud Console.
Here, unroll the navigation menu and move to APIs & Services > Credentials. Also, you can enter your Google Cloud Console directly.
In the Credentials tab, press the “+CREATE CREDENTIALS” button and select the “API Key” option from the drop-down.
Then copy the API key from the newly-appeared API key created pop-up.
If you have previously created your API key, move to the API Keys section, press the “SHOW KEY” link, and copy this API key from the Your API key field.
Check the How to Create Google Maps API Key tutorial to gain an in-depth understanding of this process.
Adjust the JetEngine Settings
Install and activate the JetEngine plugin. Then, navigate to WordPress Dashboard > JetEngine > JetEngine.
Here, in the JetEngine dashboard, unfold the Modules tab and activate the Maps Listings toggle. Finally, press the “Save” button.
In the next step, move to the newly-appeared Maps Settings tab and keep the default “Google Maps” Map Provider. Then, paste the copied API key into the corresponding field and keep the “Google” Geocoding Provider.
To learn more about managing JetEngine’s Map Settings, follow the How to Choose Different Front-end and Geocoding Map Providers for Map Listings tutorial.
Scroll the tab down and press the “Validate Google maps API key” button. If the validation is successful, the following text will appear near the button: “We successfully get coordinates for random address with your API key. You can use this key for address geocoding!”.
Create a Form
Move to the WordPress Dashboard > JetFormBuilder > Add New tab and create a new form.
The newly opened default form contains the Welcome block. As we decided to make the form from scratch, we pressed the “Start from scratch” button on this block.
Read the Creating a Form tutorial to learn how to build forms from scratch and customize their settings.
Then, the Welcome block will disappear, and the default Hidden Field, Text Field, and Action Button blocks will be added. Type the form’s title (in this case, we typed the “Delivery Address” text).
Add the fields you need. We create a form to get the client’s address and display it on the map, so we customize the default Text Field and then add another one (for the client’s name and contact information). Then, we unroll the settings of the first Text Field and type its FIELD LABEL (the “Name” text). The FORM FIELD NAME field will be filled out automatically. For the second Text Field, we type the “Telephone” FIELD LABEL and set the “Tel” FIELD TYPE, respectively.
In the next step, find and drag-n-drop the Map Field block. Unroll the Block settings and insert the FIELD LABEL (the “Map” text in this tutorial).
After scrolling down the Block settings, pick the Address tab of the VALUE FORMAT field in the Value tab. Also, in the Map Settings tab, enable the Show search autocomplete toggle to display the autocomplete drop-down list.
If needed, change the FIELD LABEL of the Action Button. In this tutorial, we delete the default “Submit” text and type the “Order” text.
Finally, save the form by pressing the “Publish/Save” button.
Add the Form to a Page
You can place this form on a page, Single Post Page, or an Archive template using the JetForm widget/block/element according to your requirements and preferences.
In this case, we use Elementor.
To learn how to add your form on pages using Elementor, Block Editor, or the Bricks theme, read the Displaying a JetFormBuilder Form in Any Page Builder tutorial.
Create a pop-up
First, install and activate the JetPopup plugin.
Then, navigate to the WordPress Dashboard > JetPopup > All Popups tab and press the “Create New Popup” button.
In the newly-appeared window, select the “Elementor” Content Type, type the pop-up’s Name, and tick the “Classic” Choose Preset.
Press the “Create” button.
Second, after redirection to the selected editor, customize the form as you need. In this tutorial, we delete the default content.
Find the JetForm widget and drag-n-drop it to the pop-up. Then, pick the created form in the Choose Form drop-down list. Finally, press the “Publish” button to save the pop-up.
Read the How to Set Up a WordPress Pop-up Form tutorial to learn more details about how to create the pop-up, add the form to it, set the needed conditions, and customize the form’s settings.
Build a Listing Item
To create a Listing Item, navigate to the WordPress Dashboard > JetEngine > Listings/Components and press the “Add New Listing Item” button.
Fill out the fields of the Setup Listing Item pop-up. Then, select the “Posts” Listing source, pick the needed CPT in the From post type drop-down, type the Listing item name, and choose the “Elementor” Listing view.
After that, click the “Create Listing Item” button.
For more details on how to build listings, add dynamic content, and place the listing on pages, read the How to Create Listing Template for Post Types in Elementor tutorial.
Build the listing item and add the required fields using the Dynamic Field and Dynamic Image widgets.
Then, insert the Button widget. Unroll the General settings and type the text in the Text field to be shown on this button (the “ORDER” field, in this case).
In the last step, move to its Advanced settings tab, unroll the JetPopup section, and choose the pop-up in the Attached Popup drop-down list. Then, set the “Click On Widget” Trigger Type and activate the JetEngine Listing popup toggle.
The How to Build a Dynamic Popup for JetEngine Listings tutorial explains this process in more detail.
Finally, save the Listing Item by pressing the “Publish” button.
Add the Listing Grid to a page
Open a page, insert its name (the “Pizza and More” text in this tutorial), and add the Listing Grid widget.
Unroll the General settings and choose the pre-created Listing item in the Listing drop-down list.
Save the page by pressing the “Publish” button.
Check the Result
Navigate to the front end and open the page you added the form.
In this tutorial, we linked the form with the Button widget to simulate the ordering of the needed products. Therefore, we open the page with the Listing Grid widget (the “Pizza and More” page includes the product data and the “ORDER” buttons). Here, we press the “ORDER” button near the corresponding item.
Fill out the fields of the form and then type the first three characters in the text field of the Map Field block. In this tutorial, we fill out the fields in the newly appeared pop-up and type the first characters in the Map field (“Lviv”, in this case).
Then, the text field of the Map Field block will offer five addresses in the drop-down list. Select the needed variant, and the map will show you the location.
In this case, we pick the “Lviv National Opera, Svobody Avenue, Lviv, Lvivska Oblast, Ukraine” variant from the proposed ones.
After that, the Map field will display the corresponding location.
That’s it. Now you know how to activate the autocomplete drop-down list to the Map Field block of the JetFormBuilder plugin for WordPress to display a selected from the list location.