Map Field Overview

The Map Field block displays maps (Google, Leaflet, and Mapbox) with set zoom parameters (zooming to a specific country). The field block allows:

  • inputting coordinates by pinning the needed location on the map;
  • storing the data location in three different ways: as a string with location Lat and Lng separated by a comma, as an array, and as a physical address;
  • saving its values conveniently in the “Map” meta field of the JetEngine plugin.
NOTE

To use the Map field block, install and activate the JetEngine (v3.0.3 or higher) plugin, enable its Map Listing Module, and set the Maps Settings options.
Read the How to Create Google Maps API Key tutorial to know how to receive the API key and set it in the JetEngine dashboard to display maps on your site.

Adding the Map Field

After creating a new form or opening a previously built one, the Map Field block should be found in the search bar of the block inserter (the “plus” icon) and then inserted where needed.

adding the map field block

Settings of the Map Field

This field block has the following settings tabs: General, Value, Map Settings, and Advanced. 

map field block settings

General Settings

The General settings tab includes the FIELD LABEL, FORM FIELD NAME, and FIELD DESCRIPTION fields:

map field block general settings
  • FIELD LABEL ㅡ a field intended for the field’s label;
  • FORM FIELD NAME ㅡ a field intended for the field’s name. This field will be filled out automatically after adding the text in the FIELD LABEL field;
  • FIELD DESCRIPTION ㅡ a field for the description of the map.
NOTE

The FIELD LABEL and FIELD DESCRIPTION fields allow the usage of shortcodes.

Value Settings

The Value settings allow for the specification of the location center using coordinates and the zoom setting of the map. The Value tab includes the following settings:

map field value settings
  • VALUE FORMAT ㅡ a field that allows choosing how to store the location by clicking the corresponding button (“String,” “Array,” or “Address”):
    • String ㅡ an option that, if selected, stores the coordinates as a string with location latitude and longitude separated by a comma. For example: “46.969686110698525,31.991035188696703”;
    • Array ㅡ an option that, if selected, stores the coordinates as an array of latitude and longitude. For example: “{“lat”:46.969686110698525,”lng”:31.991035188696703}”;
    • Address ㅡ an option that, if selected, stores the location as a physical address, like this: “6 Walnut Road, Manchester SW1A 1AA, UK”.
  • DEFAULT VALUE ㅡ a field that allows entering or selecting dynamically the latitude and longitude coordinates.
NOTE

While the location can be stored in three different formats, manual input in the DEFAULT VALUE field is available only in the “String” format, i.e., “50.45,30.53”. This format works regardless of the options set in the VALUE FORMAT field.

The DEFAULT VALUE field allows usage of the dynamical data by pressing the “Dynamic Tag“ icon. 

It opens the Edit Preset pop-up for selecting a data source from the following options: “Post,” “User,” “URL Query Variable,” and “Option Page.” In turn, each selected option turns on the appropriate field, allowing one to choose the needed data. Also, this pop-up includes the Restrict access toggle that allows restricting users who are allowed to edit this value.

dynamic data as a source for map data

The needed settings should be saved by pressing the “Update” button.

After selecting the dynamic data in the Edit Preset pop-up, the ZOOM slider will be added to the Value settings. This field has three buttons to set the “Default,“ “Small,“ and “Custom“ zoom. Clicking the “Custom” button enables a field to type a zoom value ranging from “1” to “18.”

zoom field of the value settings

Map Settings

The Map Settings tab has the following settings:

map settings of the map field
  • Show search autocomplete ㅡ a toggle that, if enabled, adds a drop-down field that allows selecting an address from a drop-down list of the proposed five addresses and displaying a picked location on a map. Read the How to Enable Search Autocomplete for Map Field Block tutorial for more details;
  • HEIGHT ㅡ a slider that allows setting the map dimensions. The map height can be adjusted between “50“ and “1000“ pixels. Pressing the “Reset” button sets a 300-pixel height.

Advanced settings

The Advanced settings include:

advanced settings of the map field
  • Add Prev Page Button ㅡ a toggle that, if activated, adds the “Prev Page” button to the form;
  • Prev Page Button Label ㅡ a field that allows changing the text to be shown on the “Prev Page” button;
  • Field Visibility ㅡ a drop-down list that allows displaying the form for “For all,” Only for logged in users,“ and ”Only for NOT-logged in users”;
  • CSS Class Name ㅡ a field for adding the CSS class.

Post Submit Actions

The Map Field block allows storage of the map data inserted on the front end in the WordPress database. In particular, the “Insert/Update Post” Post Submit Action should be added. In this case, the formats of the form Map Field block and the JetEngine’s “Map“ meta field should be of the same type.

aadding the map field data to cpt

Pressing the “Update“ button saves the changes.

Front End View

On the front end, the Map Field will display two fields: the text field with the “Search” text and the map.

the field map on the front end

After typing three characters in the text field, the drop-down list will appear.

typing a text in the address autocomplete drop-down

Once the needed address from the list is picked, the map will show this location.

the map of the map field displays the location

After pressing the “SUBMIT” button, the set address will be added to the specified Custom Post Type.


That’s all about the Map Field block of the JetFormBuilder plugin, which allows one to work with the “Map“ meta field of JetEngine and gives users the ability to select the location on the map.

Related Docs