Discover how to embed Google Maps in WordPress in a simple way. Follow this guide to add custom maps to your site without coding!
Approximate read time: 9 minutes
Ever wanted to show visitors exactly where to find you but don't know how to code?
Adding a map can make your website more engaging and user-friendly, whether you're a small business owner, event organizer, or travel blogger. And the good news? You don't need to be a tech expert to make it happen.
This guide will show you the simplest way to embed Google Maps in WordPress step by step.
So, before we start, there are two ways to embed a Google Map in WordPress:
- Use the HTML code from Google Maps
- Use a form plugin
We'll show you how to do both so you can choose the best option. For the form plugin, we'll use Formidable Forms, the most advanced WordPress form builder on the market.
But first, let's show the simplest way to use WordPress to embed a Google Map: using a piece of HTML.
Embed a Google Map with HTML
There's a good chance you've seen this method and never realized it was so easy to use.
First, go to Google Maps and find the location you want to show on your WordPress site.
Next, click the Share button, and a popup will appear.
Then, click the Embed a map tab and click Copy HTML to get the embed code.
Next, head to your WordPress site and go to the post or page where you want to show the map. Then, add a new WordPress block in the Block Editor and find the Custom HTML block.
Paste the HTML from Google Maps into the block, and click the Save/Update button to show the changes on your site.
This is an excellent way to show a basic map on your website. But if you'd like a more customizable method that allows you to add custom information, multiple pins, and even improve your SEO, check out the following method.
Embed a Google Map using a form plugin
As mentioned above, the best way to do this is using Formidable Forms.
With its Geolocation add-on and Formidable Views, you can take your form entries and show them on a map in a few simple steps. Whether you need to display a business location or the best unknown restaurant in a city — Formidable Forms can help you.
So, to get started, grab the Formidable Pro version (Business plan or above) to get the tools you need. Then, it's six steps:
Step 1: Install and activate Formidable Forms
First, we must install and activate Formidable Forms and the add-ons.
So, assuming you already grabbed a plan, go to your WordPress dashboard, click Plugins → Add New, and search for Formidable Forms.
Click Install, then Activate. Next, go to Formidable → Global Settings and click the Connect an Account button to connect your Formidable Forms Pro account.
Follow the setup wizard to finish linking your account (or click the Get Formidable Now button to get one).
Once that's finished, we need add-ons to do the dirty work. So, go to Formidable → Add-ons and click the toggle button for the Geolocation add-on.
Do the same for the Visual Views add-on. This will create the map and show your locations on the map. Once those are ready, it's time to get your Google Maps API key.
Step 2: Get and enter your Google Maps API key
The Google Maps API key communicates with Formidable and Google Maps.
If you already have this, you can skip ahead in the tutorial. If not, here's how to get one for free.
First, go to the Google Cloud Platform Console (Google Developers Console) and choose an existing project or create a new one. Once ready, go to the API & Services dashboard using the menu icon in the top-left corner.
Note: This process requires a credit card, though it's free as long as you stay under the limit.
Then, click on the + Enable APIS and Services button and find the following APIs in the library:
- Geocoding API
- Maps JavaScript API
- Google Places API
Enable all three, then go to APIs & Services → Credentials. Here, click the + CREATE CREDENTIALS button and select API Key. Your new API key will appear in the popup. Then, you can click the Edit API key to set restrictions.
To use the key with Formidable, choose Application Restrictions → HTTP referrers (web sites). You can also restrict domains by using the key if you want.
To do this, click Website Restrictions → Add an Item, and enter your website's domain.
Once finished here, go to your WordPress dashboard, go to Formidable → Global Settings, and find the Geolocation tab. Then, enter your Google Maps API key in the box:
Step 3: Create a form with an autofill address field
Now, we can create your form to enter the addresses you want to show on the map.
So, go to Formidable → Forms and click the Add New button.
Here, you have three options to create your form:
- Create a form from scratch
- Use a pre-built form template
- Use the AI form builder
We'll create a form from scratch by clicking Create a blank form and the drag and drop form builder will open. This is where you can start customizing the form to match what you need.
Most importantly, you need an address field, which can be a Text or Address field. Text is great for single-line addresses, and Address is great for showing multi-line addresses.
For either field, click on it and select both Add address autocomplete and Show map in the Field Options. You can turn on Use visitor location if you'd like, but it's not necessary.
With these two features, the field will show a generated list of options as the user fills in the address. They can also use the map to move the pin around or view where it is before entry.
Feel free to add any other fields you may need. When you're done, you can click the Preview button to get an idea of what it looks like. Last, click the Save button and give the form a name once it's finished.
Step 4: Enter a sample form entry
With no form entry, nothing will show on the map we'll create in the next step. So, let's create a test entry to preview what it looks like for easy customization.
First, go to the Entries tab for your form and click Add New.
Then, fill out the form with a sample address and click Submit. If there are multiple locations, repeat the process until you have entered them all.
You can display all of these on one map.
Step 5: Create a Map View
Now, we'll create the view showing the map with the pins for the locations.
So, go to Formidable → Views and click the Add New button in the top right. Then, click Map.
Next, give the View a name (you're the only one who can see this), choose a data source from the Use Entries from Form (the form you created), and click Create a view.
This is where you can start customizing the map's appearance. The plugin will open the Listing Page for the view, and you'll see the pins for your form entry from the previous step.
To customize it, click the map to open and edit the Listing Page content. This allows you to add extra information manually or import it from other fields on your form. It has a Visual/Text editor, so you can customize it using HTML or simple text.
For example, if you're showing a set of business locations, you could include the Business Name and Address field information. These shortcodes match the Field ID (which you can see in the panel on the right under Customization).
On the map, it will look like this:
So this gives you a lot of power and customization options to design how you want your pins and information to look on your site.
So play around here and familiarize yourself with what you can do. You can even create a Details page to add more information about a location.
Be sure to check out our Map View documentation for help.
Also, save your view when you're done customizing it. Then, we'll move on to the next step.
Step 6: Publish the view
The last thing to do is publish the map view on a page or post it on your website (aka embed the map on your site).
So, go to the page where you want to show it and add a new WordPress block. Then, find the Formidable Views block and add it to the page. Next, choose the map view you created from the dropdown list.
The map will load, and you'll just have to publish/update the page — you're ready to go!
Allow users to update their map pin
We hope this tutorial on how to add a Google Maps to your site has helped you. Whether using the basic HTML map from Google or Formidable Forms helps you do bigger things, we hope this step-by-step tutorial helps you do exactly what you need.
If you want more, we have something we think you'll like. After all, contact details and business hours change, and local businesses 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. So, you can take the work off your back and let people update their details—all without access to the backend.
So, if you're ready to get started, grab Formidable Forms using the button below.
And follow us on Facebook, Twitter, LinkedIn, and YouTube and join 50,000+ others in hearing the latest updates from Formidable Forms each month! 👇
How To Add a Google Map to a WordPress Contact Form [Free!]
How To Add Google Address Autocomplete Fields in WordPress
8 Best WordPress Geolocation Plugins [Free & Paid!]
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.