Do you want to embed a map to list business locations, showcase online directories, or display club members? Using Formidable Forms and MapPress, it’s easy to map multiple locations and display form submissions as markers on a map.
Step 1 – Setup a custom post type for your Map Markers
MapPress pulls data from posts to display them on a map. Because your main post types may be used by different features of your theme, it’s sometimes best to create a completely new custom post type. I’m using the Custom Post Type UI plugin to add a post type called “Map Locations”. Notice the post type slug “location” – we’ll need this in Step 5.
Step 2 – Create your form with address data
Now swtich back to Formidable and Create a new form for adding markers to the map. Include all the form fields needed to build a beautiful business listing. For example, include an image upload field, fields for phone numbers, business hours, and links to social media accounts.
Most importantly, include address fields which will be used to place a map pin.
Step 3 – Set your form to create posts with custom fields
This is the critical step! In your form actions, add an action to create a new post. In the Post Type dropdown, select the Map Locations post type you created earlier.
Select the field for the post title and set the post status field to “Create Draft”. Set the other options as best suits your form.
Now match (or ‘map’) the custom address fields used in the form to the standard MapPress map fields. This will pass the form fields to MapPress and create a map when the form is submitted. For example, here the fields ‘city’, ‘state’ and ‘zip’ are mapped to ‘Address line 1’, ‘Address line 2’ and ‘Address line 3’ in MapPress, along with a ‘Title’ field so users can enter a title for the map marker:
Step 4 – Setup post moderation
Your form action sets the post status to draft, so now we need a method to approve the draft submissions. The simplest method is to setup an email notification to request moderation. This email should inform site admin when a new map marker has been submitted. Administrators can check the submission and either publish the post or trash it as appropriate.
Step 5 – Set up a MapPress Mashup
When a form is submitted, Formidable will create a post for the form, and MapPress will automatically create a map attached to that post. You can see the attached map in any post, by bringing up the MapPress map picker and looking for a map named ‘automatic’.
We’d like to combine all of these individual maps into one ‘mashup’ map. The mashup will combine all the markers into a single searchable and filterable map.
Create a new post titled “Mashup Map”. If you’re using the Gutenberg editor, add a MapPress Mashup block to the post, and select the “Map Locations” post type we created earlier, in the ‘query’ section of the mashup block settings:
If you’re using the Classic editor, just enter the shortcode below in the post body. Notice that the query attribute is telling MapPress to show only the post type ‘location’ – that’s the post type slug we created in step 3:
Step 6 – Submit forms to map multiple locations
Now it’s time submit a test location to see if your hard work has paid off. Remember that your form submissions will not add a marker to the map immediately. First the site admin will receive an email and the post will need to be approved.
As you approve the posts, check the Mashup Map post we created in step 5. You should see the new map markers (don’t forget to refresh the page in your browser).
Bonus step – Add Filters, Styled Maps, Custom Markers and More
Using the MapPress settings, it’s easy to add filters by categories, tags, taxonomies, or post type. You can also make your maps look professional by adding map styles, custom markers, and thumbnails for featured images. See the MapPress Documentation for details!