MapPress is a free WordPress plugin that creates Google maps. You may have a form that collects address information that you want to use to create WordPress maps.
This is handy with business listings, real estate listings, and many others. Special thanks to Chris at MapPress for providing this tutorial (current as of June, 2022).
1. Install Plugins
This guide uses two plugins:
2. Create your WordPress Form
First, you need a WordPress form to collect the addresses you want to use in your maps. You can use any number of fields for your address that you would like. One field for the whole address, or multiple fields to separate out the city and state.
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.
3. 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.
4. 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.
5. 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:
6. 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.
7. 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:
[mashup query="post_type=location"] 8. 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: 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!
Thanks a lot for this post!
I´ve tried to display more than one marker and already extended the functions.php.
Unfortunately only one marker is being displayed. On the individual display I placed the following:
Before the content:
[form_to_mappress
Content:
address1= "[81] [82],[84], [85]" title="[83]" body="testing 1-2-3 id=[id]"
After the content:
width=600 directions="google"]
Questions:
- What am I doing wrong? Maybe add a counter so variables address1, address2, address3 are being generated independent from [id], because when deleting an entry this display might be lost?
- can I set individual titles and bodys for every entry?
- I´d like to have different icons for some entries... 😉
Hope this can be done with this solution - it´s my goal to display up to 100 entries on one map. Also contacted Chris (developer of MapPress) for extending the plugin.
Deeluxe and others wanting a global/or map mashup,
Here is the link for my feature request with Chris Richardson, the developer of MapPress. http://wphostreviews.com/forums/topic/mappress-and-formidableforms-pro-pre-purchase-question.
Maybe if we all ask nicely and promise to support his premium plugin, he'll move it to the top of the 'to do' list? Add your request to my forum request at the link above.
Stephanie,
The Pro version of MapPress includes a Map Mashup. Yeah! Just what I've been waiting/looking for! Do you see any reason why the mashup feature wouldn't work with FormidablePro? Would it be possible to get a demo of how to do that? Is the plugin code any different than shown above?
I am currently using GoogleShortcode with my forms, as previously suggested, as the mashup/global feature is not nearly as straighforward as this one, I'd like to change it. Any tips, shortcuts or things to watch out for when making the switch?
@lynn, We are not MapPress experts and have not used their pro version. You're welcome to try it out and let us know how it goes.
@Stephanie- Working on it with Christopher (MapPress), but as you know my coding skills, although gaining daily, are still at a novice stage. If I can get it to work, I will post it back here. Stubborn is a quality, right?
Wouldn't this be an awesome 'Add-on' for FormidablePro? 🙂 Thanks and stay tuned...
is there anyone who has a demo on how the mash-up will work with mapress?
Where exactly do you put the shortcode for this feature? (see below) How do you copy the code into a new plugin? And/or where exactly does it go inside the functions.php file (between what brackets, etc.). Tiny HTML experience here...
Add a new shortcode. Copy and paste the following code into a new plugin or your theme functions.php file. This doesn’t need any modification or changes.
Thanks!
Instructions updated above with a little more detail.
OK, great thanks. It looks like I got it, but now it's not reading the addresses from the form and I'm getting a blank blue google map. 350=address, 349=city, 348=state, 351=zip.
[form_to_mappress address1="[350], [349], [348], [351]“]
I also tried just doing one field for the whole address but got the same blue google map.
[form_to_mappress address1="[344]“]
I have this is in the Dynamic Content of the Custom Display. Am I missing a connection somehow?
Thanks!
I took out the brackets from the code but it still did not work.
Please try adding the shortcode directly on a page without the custom display for starters. Some addresses may not be recognized without the exact formatting that MapPress is expecting.
[form_to_mappress address1="500 chestnut st, phildelphia“]
(Replace the address with the one you are trying to create a map for.)
After less than an hour I found this plugin "Walk Score" http://wordpress.org/extend/plugins/walk-score/ and it's working great with the formidable pro, It has a mash-up functionality.
Hi Stephanie,
The shortcode appears to work for me on a page without the custom display (ie using the format [form_to_mappress address1="500 chestnut st, phildelphia“]), but if I copy and paste the same shortcode with the hardcoded address (or address made from shorcodes of my form address fields) in the custom display.
Am I doing something wrong?
Thanks!
*but it does not work if I copy and paste the same shortcode with the hardcoded address (or address made from shorcodes of my form address fields) in the custom display.
It just shows the form_to_mapress shortcode on the post using the dynamic display
Please add filter=1 to your custom display shortcode (not the form_to_mapress shortcode). This should tell your custom display to interpret [ ] as a shortcode rather than just text. For example: [display-frm-data id=x filter=1]
i bought F.Pro yesterday, great product, bought mappress pro last night, seems good (although not got it working yet.
ok, so in my CF of my CT i have:
id 96 = address (street), 97 = town, 98 = region, 99= country and 100 = postcode.
i have set Mappress settings to include my CT, BUT, in the mappress settings it says "which field to use for address, well, i have 5, but can only select one, do i need to create a new field that contains a merge of the address fields for mappress to use then in its sidebar widget? thoughts? (also not sure how to create a merged hidden field, ideas?
also, i then have this shortcode in my post (hard coded for now):
[form_to_mappress address1="[99]" title="Nice map"] - just get blue map of death
also tried
[form_to_mappress address1="[96],[97],[99][100]" title="Nice map"]
no joy, and that isnt working as when i see the map title it shows the ids so the comma is screwing around with it.
i am really stumped now. I just want a dynamic shortocde on my posts that a user creates front end 🙂
boo hoo
anyone got this working
Thanks
Darren
When using the shortcode with ids, it MUST be inside a custom display, not on a post page.