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.
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. Learn more with this tutorial on how to add a Google map to WordPress forms.
Even better, you can add a contact form to any website, not just WordPress!