Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Njones35 / Last Updated December 4, 2022

How to Embed a Google Map with WordPress Form Submissions

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.

Display form entries as Google map pins

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.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

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

Embed Google map with form submissions post typeThe 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

embed Google map from form with custom fieldsIn 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.

Google map from form with moderation

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.

Google map with Progress Maps plugin

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.

Embed a Google map with WordPress form submissions

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!

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Comments

  1. DMB says

    July 4, 2018 at 6:48 pm

    Is this method suitable to display a single location on a map? On a Contact Us page for example.

    Reply
    • Nathanael Jones says

      July 5, 2018 at 12:23 am

      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....

      Reply
      • Ben Williams says

        December 5, 2018 at 4:44 am

        Could you extend on "to display a single pin in a static location then there are much simpler ways to do it" please?

        Reply
        • Nathanael Jones says

          December 5, 2018 at 4:50 am

          For this you don't need a plugin - you can get map code directly from google & embed it into your website.

          Reply
  2. waritt says

    December 14, 2018 at 1:04 am

    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!!!

    Reply
    • Nathanael Jones says

      December 14, 2018 at 1:11 am

      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.

      Reply
    • waritt says

      December 14, 2018 at 1:14 am

      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);

      Reply
      • Nathanael Jones says

        December 14, 2018 at 1:31 am

        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.

        Reply
      • Claus says

        November 21, 2020 at 11:16 am

        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

        Reply
  3. Phil Cox says

    October 10, 2019 at 3:03 pm

    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.

    Reply
    • Nathanael Jones says

      October 11, 2019 at 1:54 am

      Hi Phil,
      I've not had chance to make that comparison yet - but if you try it I'd love to hear your feedback. 🙂

      Reply
  4. reinout says

    August 2, 2020 at 7:44 am

    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?

    Reply
    • Nathanael Jones says

      August 2, 2020 at 9:03 am

      Yes, this is possible with the Premium version of Formidable in conjunction with a mapping plugin like Codespacing Progress Maps.

      Reply
      • Dmitry Klimenkov says

        December 20, 2021 at 1:42 pm

        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

        Reply
        • Nathanael Jones says

          December 21, 2021 at 2:48 am

          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.

          Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Email Updates

Popular Resources

    • How to Create a Searchable Database on a WordPress Site
    • Create a WordPress Custom Calculator: Easy, Powerful Results
    • How to Create a Fitness Tracker in WordPress
    • Formidable Views: The Best WordPress Custom Application Plugin
    • How To Require Email To Download Files in WordPress
    • How to Create Conditional Drop Down Lists in WordPress Forms
    • Best Gravity Forms Alternative for WordPress: Formidable Forms vs. Gravity Forms
    • How to Make a Quiz in WordPress
    • WPForms Alternative: Formidable Forms vs. WPForms Compared

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews