Do you want to embed a Google map to list business locations, showcase online directories, or display club members? Learn how to map multiple locations and display form submissions as pins on a Google map.
How to map multiple locations and display form submissions as pins in an embedded Google map is a subject that comes up in our helpdesk regularly. The use of interactive maps is an essential part of realtor sites, classified ads sites and many other applications. These embedded Google maps can help make some really cool websites, and they are easy to setup.
Choose a WordPress map plugin
The first time I embedded a Google map to list form submissions, I was building the Suspended Coffees website. Today I'm going to show you how to build a similar directory type system. The basic principles can be applied to many different types of businesses and organizations.
In this tutorial I'll use a WordPress map plugin called Codespacing Progress Maps. I don't often recommend paid 3rd party plugins, but it's one I use personally and really like.
I'm also using a free plugin for custom post types called Custom Post Type UI. I'd recommend installing both of these plugins before following this tutorial.
6 steps to embed a Google map with pins from form submissions
Step 1 - Setup a custom post type for your Map Pins
The Progress Maps plugin pulls data from posts to display them on a map. Because your main post types are used by different features of your theme, it's often 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 Pins". If you have some coding skills you can add a post type without an extra plugin. But this is the easy way!
Step 2 - Create your form with address data
Create a new form to add pins to the Google map. Include all the form fields needed to build a beautiful business listing. I'm including an image upload field, fields for phone numbers, business hours, and links to social media accounts.
I'm also including a paragraph text field so the business owner can describe their location. Most importantly, I'm including address fields which will be used to place a map pin. Finally, I'm adding invisible reCaptcha to protect my form.
** PRO TIP ** Use separate fields for Country, State, City, Town etc instead of the pre-built address field. This gives you better filtering options if you add a form to search listings in the future. Use text calculations to combine these into a single field for Progress Maps to use.
Step 3 - Set your form to create posts with custom fields
In your form actions, add an action to create a new post. In the Post Type dropdown, select the Map Pins post type you created earlier. These user submitted WordPress posts will showcase each new location submitted in the form.
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. Personally I prefer to build a View to display form data. This allows for custom layouts and styling to better match the rest of the site.
I'm also setting 2 custom fields in my form. These pass the address data to the map plugin, and set the featured image for the post:
- codespacing_progress_map_address is mapped to a hidden field in my form where text calculations are used to combine the individual address fields into one.
- _thumbnail_id is mapped to my file upload field and sets the featured image for this post.
Step 4 - Setup post moderation
Even with Formidable's built in HoneyPot spam protection and reCaptcha enabled, content moderation is recommended. 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 pin has been submitted. Administrators can check the submission and either publish the post or trash it as appropriate.
Step 5 - Embed a Google map and set the source
In the Progress Map plugin, create a new Google map and use the shortcode provided to add the map to a page.
Next set the options for the map. In the settings for Progress Maps, select the "Map Pins" post type as the data source.
On the "Default Map Settings" page, add your Google Maps API key. A link to signup is included in the settings if you don't already have an account. Google has recently changed their polices and I had to signup for a billing account to get a new API key. But the free allowance means that 99% of sites will never incur any fees.
There are lots of other options for styling and layout, so take some time to explore these. Set a style that best suits your unique website.
Step 6 - Submit pins 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 pin to your Google map immediately. First the site admin will receive an email and the post will need to be approved.
- When you receive moderation request emails, go to the edit post page and scroll until you see the map near the bottom.
- Click the "Search" button next to the submitted address to retrieve the correct map location data.
- Once the address is found, click "Get Pinpoint", and latitude and longitude coordinates will appear in the fields below the map.
- Go back up and click the "Publish" button to make this new map pin publicly visible.
Bonus step - Allow users to update their map pin
Contact details change, business hours change, businesses even occasionally move locations. So it is essential to include a way for users to update their own data. Data management is also an essential component of GDPR compliance.
Front-end editing makes it easy for users to manage their own data, and map multiple locations.
Read more: make content management easy for your clients
Do you need to show your business location on a contact page? Embedding a map directly into your contact form means you can place your map anywhere you want without the hassle, and with the best Google Maps plugin for WordPress. This tutorial teaches how to add a Google map to WordPress forms.
Even better, you can add a contact form to any website, not just WordPress!
If you're not using Formidable Pro yet, take a look at all the Pro features and check out the form maker plans to pick the perfect package for your needs. Build something beautiful today!
Is this method suitable to display a single location on a map? On a Contact Us page for example.
I guess it is - - but if you only need to display a single pin in a static location then there are much simpler ways to do it....
Could you extend on "to display a single pin in a static location then there are much simpler ways to do it" please?
For this you don't need a plugin - you can get map code directly from google & embed it into your website.
Hi. I have a frontend form for users. Made with Formidable Pro. There are 2 custom fields for latitude and longitude. I set them to codespacing_progress_map_lat and codespacing_progress_map_lng…The creation of the post works fine…also the lat & lng are insert in the fields of the progress map plugin…but it does not show on the map right after the frontend form is submitted…only when i publish again in the admin area…why? How can i solve this? Thank you very much!!!
Hi Waritt,
I believe there is a way to auto-publish, but you'll need to ask codespacing about this. Personally I always created posts as drafts and moderated, so this wasn't an issue on any of my sites.
the author from progress map give me this snippet: but it doesnt work!!! Can you help?
/**
* Syncronize Formidable Forms with Progress Map
*/
function cspm_sync_formidableforms_with_PM($entry_id, $form_id){
$post_id = $entry_id;
if(!empty($post_id) && isset($_POST[CSPM_LATITUDE_FIELD], $_POST[CSPM_LONGITUDE_FIELD])){
update_post_meta($post_id, CSPM_LATITUDE_FIELD, $_POST[CSPM_LATITUDE_FIELD]); // Latitude
update_post_meta($post_id, CSPM_LONGITUDE_FIELD, $_POST[CSPM_LONGITUDE_FIELD]); // Longitude
/**
* Add the location to the map */
if(class_exists('CSProgressMap')){
$CSProgressMap = CSProgressMap::this();
$CSProgressMap->cspm_save_marker_object($post_id, get_post($post_id));
}
}
return $post_id;
}
add_action('frm_after_create_entry', 'cspm_sync_formidableforms_with_PM', 10 , 2);
I'm afraid you will need to go back to the plugin author about this - I can't offer support for a 3rd party plugin.
Put that function in frm_pre_update_entry
- get the post id in this way:
$post_id = $entry->post_id;
then be careful when updating the latitude and longitude fields, put the right meta_key or it won't work
Hi Nathanael, very many thanks for this inspirational piece. I'm just about to commence such a project for an international manufacturer who wants to see their distributors added to a map automatically. Have you had an opportunity to compare your approach above with the alternative "GEO my WP". I'd be very interested in your views.
Thanks again,
Phil.
Hi Phil,
I've not had chance to make that comparison yet - but if you try it I'd love to hear your feedback. 🙂
Hi!
Awesome article and wonderfull website (coffee).
I'm building a wordpress site and want the input fields from the form automatically displayed on maps. The inputfields have to calculate scores from the inputform / customers.
Is this possible?
Yes, this is possible with the Premium version of Formidable in conjunction with a mapping plugin like Codespacing Progress Maps.
Hello Nathanael,
I have a Premium FF version and need to build a search within my user's DB using entered address, radius and user's lat/lon (already saved in FF db) parameters and radius. Would this be possible using Progress Maps ?
Thank you in advance,
Kind regards,
Dmitry
Hi Dmitry,
Yes - Its a long time since I used Progress Maps, but last time I did I know that Progress maps had a built-in search feature that allows you to search a set distance radius. The search would need to be a Progress Maps search and not a Formidable search to use a distance radius however.