Latest SeedProd News

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Add Multiple Google Maps on One Page in WordPress

How to Add Multiple Google Maps on One Page in WordPress 

Written By: author image Stacey Corrin
author image Stacey Corrin
Stacey has been writing about WordPress and digital marketing for over 10 years and on other topics for much longer. Alongside this, she's fascinated with web design, user experience, and SEO.
     Reviewed By: John Turner
reviewer image John Turner
John Turner is the co-founder of SeedProd. He has over 20+ years of business and development experience and his plugins have been downloaded over 25 million times.

Do you want to add multiple Google Maps on one page in WordPress?

Adding more than one map on a page gives visitors a snapshot of all your physical locations. That way, they can choose the closest location when visiting your business.

In this article, we’ll show you how to add multiple Google Maps on one page in WordPress easily.

Why Add Multiple Google Maps on One Page in WordPress?

There are many reasons for adding multiple maps to your WordPress site.

The most obvious reason is to list multiple locations, such as store locations in different regions. Or, if you host multiple events, you can create maps for each event location and show them on the same page.

You may think it’s difficult to embed more than one map on a WordPress page. But the truth is, there are several methods that make the process easier.

Below we’ll share 2 methods even beginners can do easily. So let’s jump in with the first option.

Method 1. Add Multiple Google Maps On One Page With SeedProd

The first method in this tutorial shows you how to add multiple Google maps on a landing page in WordPress.

Landing pages are the best way to convert targeted traffic into leads and sales. So if you’re promoting an event or discounts at local stores, a landing page with multiple maps is the ideal way to get people through the door.

And the best WordPress landing page plugin for the job is SeedProd.

SeedProd best WordPress Page Builder

SeedProd is a visual WordPress landing page builder that lets you create high-converting pages without writing code. It comes with hundreds of responsive landing page templates you can customize in the drag-and-drop editor.

In addition, SeedProd has tons of smart content blocks for adding user-friendly content to your page, including:

  • Google maps
  • Call-to-action buttons
  • Pricing tables
  • Image carousels
  • Testimonials
  • Dynamic text
  • Animated headlines
  • Optin forms
  • And more

That means you can create any page quickly without hiring a developer.

Follow the steps below to learn how to add Google Maps on one page in WordPress with SeedProd.

Video Tutorial

Step 1. Download the SeedProd Landing Page Plugin

First, visit SeedProd’s website and download the SeedProd plugin to your computer.

While SeedProd does have a free version, we’ll use SeedProd Pro for this tutorial. That way, we can use the Google Maps block.

After downloading the plugin, install and activate it on your website. If you need help with this step, follow this step-by-step guide for installing WordPress plugins.

Once you’ve installed SeedProd, you’ll see a welcome screen asking for your license key. Enter your key and click the Verify Key button to activate your license.

enter your license key

Note: ​​you can find your key by logging into your SeedProd account and clicking the View License Key, Details, and Downloads link.

Step 2. Create a New Landing Page

After activating your license key, scroll down the welcome screen and click the Create Your First Page button.

Create your first seedprod landing page

From there, you’ll head to SeedProd’s landing page dashboard.

SeedProd landing page modes

On this page, there are several landing page modes, including:

And with those page modes, you can turn on different landing pages with a single click. For example, you can enable maintenance mode when you’re performing minor updates.

Below the page modes section, click the Create New Landing Page button to create your first page.

create a new landing page

On the next screen, you can choose from hundreds of pre-made landing page templates. Simply click to select a template to use it as a starting point.

SeedProd landing page templates

After choosing a template, a popup opens, asking you to name your page and enter the URL.

Enter a name for your google maps landing page

From there, click the Save and Start Editing the Page button to launch your template.

Step 3. Customize Your Landing Page

SeedProd's drag and drop landing page builder

When you launch your design, it will open in SeedProd’s page builder. The editor has a user-friendly 2-panel design to make it easy to customize your page:

  • Left panel: Blocks and sections to build and customize your page
  • Right panel: Live preview of your landing page in real-time

At the top of the editor is a navigation menu to switch between your design, integrations, and settings quickly.

seedprod header navigation

And at the bottom of the left-hand panel are several other icons to undo and redo changes, switch to mobile preview, and more.

SeedProd design controls

These settings make it easier to customize your design to reach your landing page goals. For example, clicking a page heading lets you change the content, color and see the changes in real-time.

customizing landing page headings

Or, to replace the default template images, you can click any image and replace it with one from your computer, media library or choose a free stock photo.

customize your landing page image

Continue customizing your design until you’re happy with how everything looks. And don’t forget to click the Save button in the top-right corner.

Step 4. Add Multiple Google Maps to Your Landing Page

Adding multiple Google Maps to your landing page is easy with SeedProd’s built-in Google Maps block.

First, let’s add some columns to house each map. From the left-hand panel, click the Column block and drag it to a section on your page.

Now choose how many columns you want to display. For this guide, we chose the 3-column layout.

Add the column block to your landing page

Now you’re ready to add Google Maps to each column.

To do that, click the Google Maps block and drag it to the first column.

Add the google maps block to your landing page

Clicking the block settings opens a panel where you can enter your chosen location. You can then choose the map’s zoom, change the alignment, and adjust the width.

Add your Google Maps location in the block settings panel

Additionally, you can choose different border styles and adjust the spacing around your custom map in the Advanced tab.

Advanced Google map block settings

Now repeat this step for every map you wish to add to your landing page.

Step 5. Publish Your Google Maps Landing Page

When you’re happy with how your landing page looks, click the down arrow next to the green Save button and click Publish.

Publish multiple google maps on one page WordPress

Next, you’ll see a window telling you your page is published. To see a live preview, click the See Live Page button.

multiple google maps on one page WordPress

Method 2. Manually Add Multiple Google Maps on One Page in WordPress

The second method in this guide involves copying and pasting the Google Maps API embed code and pasting it on a WordPress post or page instead of using a maps plugin.

The downside to this method is you’ll need to find the embed code for each map you want to display. It also requires you to switch from your WordPress site to Google maps and back again.

Additionally, embedding maps directly in WordPress limits the customization options. So you won’t have the advanced layout control you get with a WordPress page builder like SeedProd.

Here are the steps to embed multiple google maps manually with the embed code.

Step 1. Find and Share Your Location in Google Maps

First, head to Google Maps and type in the first address you want to embed.

Find your location on Google Maps

After finding your location, click the Share icon to show the Google Maps sharing settings.

Click the google maps share icon

Now click the Embed tab, choose a map size from the drop-down menu, and click the ‘Copy HTML’ link.

Copy the google maps embed code

Step 2. Add The Embed Code in WordPress

Next, go to your WordPress dashboard and create a new page.

Inside the WordPress editor, click the Plus (+) icon to add a new WordPress block, and click the Custom HTML block.

Add the Custom HTML block in WordPress

Now paste the embed code from Google Maps into the HTML block. And if you click the Preview button, you can see how your map looks.

preview google map embed

Step 3. Embed More Google Maps

Now that you know how to add one map, add more by following the same steps. Simply choose a different map location, copy the embed code and add it in a new HTML block on your WordPress page.

Add multiple google maps to one page in WordPress

After adding all of your maps to the page, click Publish. Then when you preview the page, you’ll see each map embedded on a single screen.

Multiple google maps published in one page in WordPress

How Do I Add Multiple Locations to a Map in WordPress?

By now, you know how to add multiple Google Maps on one page in WordPress. But what if you want to add multiple pins on a single map and embed it on your WordPress site?

Luckily, you can do this with the map embed method we mentioned earlier. However, there are a few more steps that we highlight below.

Step 1. Create a Custom Google Map

First, go to Google Maps, open the menu, and click the ‘Your places’ link.

Your places in Google Maps

From there, click the Maps tab and click ‘Create Map’ at the bottom of the page.

Create a new google map

Click the label called ‘Untitled Map’ and give your map a sensible name. Repeat this step for the ‘Untitled layer’ heading.

Edit map title and description

Step 2. Pin Your Map Locations

Now you can enter your location in the search bar to search for it on the map. And once you’ve found it, click the + Add to map link to place a marker in that spot.

Add multiple Google Map locations

Repeat this step for every location you wish to add to your map.

Step 3. Share Your Map

To embed your map in WordPress, you first need to make it public; otherwise, you can’t access the embed code. So go ahead and click the ‘Share’ icon.

Now toggle the following settings to the on position:

  • Anyone with this link can view
  • Let others search for and find this map on the internet
Make Your Google Maps public

After sharing your map, click the 3 dots in the top right corner, and select the “Embed on my site” option.

Click the embed on my site link

From there, you can copy the custom Google Maps embed code.

Copy the google maps embed code

Step 4. Embed your Map in WordPress

The final step is to add your map with multiple locations to a new WordPress page. So create a new page, choose the Custom HTML block, and paste your embed code.

Pase the Google Maps embed code in a Custom HTML block

Now when you click Publish and preview your page, you’ll see only 1 map with multiple custom markers.

Google Map with multiple location markers in WordPress

And that’s it!

We hope this tutorial helped you learn how to add multiple Google Maps on one page in WordPress. You might also like this guide on creating a vertical pricing table in WordPress.

Thanks for reading. Please follow us on Twitter, Facebook, and YouTube for more helpful content to grow your business.

author avatar
Stacey Corrin Writer
Stacey has been writing about WordPress and digital marketing for over 10 years and on other topics for much longer. Alongside this, she's fascinated with web design, user experience, and SEO.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

Add A Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.