Map Field

Introduction

The Map Field displays and edits locations from one or more connected Geocoder Fields. Visitors can review locations visually and, when the connected Geocoder permits it, move a marker or select a position on the map.

Available in: Starter, Pro, and Agency.

Interactive maps require the Maps JavaScript API on the Browser API Key. Saved or static map output requires the Maps Static API.

Configuring the Map Field

Geocoder Fields

Select one or more Geocoder Fields whose locations and markers should appear on the map. Marker image, info-window, visibility, dragging, map-click, and address-output behavior are configured on each connected Geocoder Field.

Initial View and Dimensions

• Default Latitude and Default Longitude: set the initial center before a connected location becomes available.
• Map Type: choose Roadmap, Satellite, Hybrid, or Terrain.
• Zoom Level: choose the initial zoom from 1 through 18.
• Map Width and Map Height: set the displayed dimensions using valid CSS units such as 100% or 400px.
• Scroll-wheel Zoom: controls whether the mouse wheel can zoom the map.

Styles, Map ID, and Bounds

• Map Styles: accepts valid Google Maps style JSON.
• Map ID: connects the field to a Google Cloud map configuration and may be required by an Advanced Marker setup.
• Southwest and Northeast Bounds: define a rectangular area for the map.

You can disable Advanced Markers globally under Ninja Forms > Settings > Geolocation when the site needs standard markers.

Setting Up and Using the Map Field

1. Add a Geocoder Field for each independent location that the map should display.
2. Add the Map Field and select those Geocoder Fields.
3. Configure the initial center, map type, zoom, and dimensions.
4. Configure each marker on its connected Geocoder Field.
5. Optionally add Address, Coordinates, or Locator Button Fields connected to the same Geocoder.
6. Save the form and test address selection, marker interaction, and every connected location on the frontend.

A Directions Field can draw its route on a selected Map Field. Agency Drawing Tools can also use a Map Field as the drawing surface.

Saved Value and Outputs

The Map Field displays an interactive map while carrying its form value in a hidden input. It saves JSON containing the map center, zoom level, map type, and marker data.

Supported merge-tag parts include:

• map or html for rendered map output.
• map_url or url for the generated static-map URL.
• json for the stored map data.
• details for a readable map summary.

Static map output uses the Browser API Key and requires the Maps Static API.

Troubleshooting

Helpful Links

• Geocoder Field
• Geolocation Fields Syncing
• Google Maps API Keys