The Map Field in Formidable Geolocation adds an interactive Google Map directly into your form. Users can move the map marker, click the map to choose a location (if enabled), and visually select precise coordinates. The Map Field synchronizes with one or more Geocoder Fields, enabling full two-way interaction with Address Fields, Coordinates Fields, Locator Buttons, Directions Fields, and other geolocation components.
Configuring the Map Field
The following options let you define how the map behaves, how it looks, and how it interacts with geolocation data across your form.
Address Field settings in Formidable Geolocation.
1. Geocoder Fields
Select one or more Geocoder Fields to synchronize with this map. When multiple geocoders are selected, the Map Field will respond to updates from any of them, allowing advanced workflows (for example, displaying multiple synced locations on the same map).
At least one Geocoder Field is required for syncing. See the Geocoder Field page for setup instructions.
2. Default Coordinates
Set the initial center point for the map when the form loads. These coordinates determine the map’s starting view before any user input or synced geolocation updates occur.
Default Latitude
Enter the default latitude for the map center (Example: 40.7827096).
Default Longitude
Enter the default longitude for the map center (Example: -73.965309).
3. Map Options
Customize the appearance and behavior of the map, including map type, zoom level, and size.
Map Type
Select the map’s visual style:
Roadmap: Standard street map view (Default).
Satellite: High-resolution satellite imagery.
Hybrid: Satellite imagery with labeled roads and places.
Terrain: Physical map showing elevation and land features.
Zoom Level
Set the map’s initial zoom level (1–18). Higher numbers zoom in closer. (Example: 12)
Map Width
Define the map's width using any valid CSS unit (e.g., 100%, 600px).
Map Height
Define the map's height using any valid CSS unit (Example: 300px).
Enable Scroll Wheel Zoom
Allow users to zoom the map using their mouse’s scroll wheel. Recommended to disable on scroll-heavy pages.
Map Styles
Apply custom map styles using a JSON style object. Styles control map colors, labels, terrain visibility, and more. You may paste styles from Snazzy Maps or create your own using Google’s Map Style Editor.
Note: When Advanced Markers are enabled in plugin settings, Map Styles may be disabled.
Map ID
Enter a Map ID created using the Google Maps Style Editor to apply a custom style package. This option is required for Google’s new MapID-based styling system.
4. Map Bounds Restriction
Restrict the map’s panning area to a defined geographic region. Users will not be able to navigate outside the bounds you specify.
Southwest Point
Enter the coordinates of the southwest corner of the restricted area (Example: 26.423277,-82.137132).
Northeast Point
Enter the coordinates of the northeast corner of the restricted area (Example: 26.4724595,-82.021776).
Setting Up and Using the Map Field
Follow these steps to configure and use the Map Field effectively:
Add the Map Field: Place it anywhere in your form to display a Google Map.
Select Geocoder Fields: Choose one or multiple Geocoder Fields to sync with this map.
Set Default Coordinates: Configure the map's initial center point.
