How to Add Multiple Google Maps on One Page in WordPress (2023)

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
    • Method 2. Manually Add Multiple Google Maps on One Page in WordPress
      • How Do I Add Multiple Locations to a Map in WordPress?

        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.

        How to Add Multiple Google Maps on One Page in WordPress (1)

        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.

        Get Started with SeedProd

        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.

        How to Add Multiple Google Maps on One Page in WordPress (2)

        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.

        How to Add Multiple Google Maps on One Page in WordPress (3)

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

        How to Add Multiple Google Maps on One Page in WordPress (4)

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

        • Coming Soon
        • Maintenance Mode
        • Login
        • 404

        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.

        How to Add Multiple Google Maps on One Page in WordPress (5)

        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.

        How to Add Multiple Google Maps on One Page in WordPress (6)

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

        How to Add Multiple Google Maps on One Page in WordPress (7)

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

        Step 3. Customize Your Landing Page

        How to Add Multiple Google Maps on One Page in WordPress (8)

        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.

        How to Add Multiple Google Maps on One Page in WordPress (9)

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

        How to Add Multiple Google Maps on One Page in WordPress (10)

        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.

        How to Add Multiple Google Maps on One Page in WordPress (11)

        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.

        How to Add Multiple Google Maps on One Page in WordPress (12)

        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.

        How to Add Multiple Google Maps on One Page in WordPress (13)

        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.

        How to Add Multiple Google Maps on One Page in WordPress (14)

        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.

        How to Add Multiple Google Maps on One Page in WordPress (15)

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

        How to Add Multiple Google Maps on One Page in WordPress (16)

        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.

        How to Add Multiple Google Maps on One Page in WordPress (17)

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

        How to Add Multiple Google Maps on One Page in WordPress (18)

        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.

        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.

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

        How to Add Multiple Google Maps on One Page in WordPress (19)

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

        How to Add Multiple Google Maps on One Page in WordPress (20)

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

        How to Add Multiple Google Maps on One Page in WordPress (21)

        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.

        How to Add Multiple Google Maps on One Page in WordPress (22)

        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.

        How to Add Multiple Google Maps on One Page in WordPress (23)

        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.

        How to Add Multiple Google Maps on One Page in WordPress (24)

        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.

        How to Add Multiple Google Maps on One Page in WordPress (25)

        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.

        How to Add Multiple Google Maps on One Page in WordPress (26)

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

        How to Add Multiple Google Maps on One Page in WordPress (27)

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

        How to Add Multiple Google Maps on One Page in WordPress (28)

        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.

        How to Add Multiple Google Maps on One Page in WordPress (29)

        Repeat this step for every location you wish to add to 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
        How to Add Multiple Google Maps on One Page in WordPress (30)

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

        How to Add Multiple Google Maps on One Page in WordPress (31)

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

        How to Add Multiple Google Maps on One Page in WordPress (32)

        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.

        How to Add Multiple Google Maps on One Page in WordPress (33)

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

        How to Add Multiple Google Maps on One Page in WordPress (34)

        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.

        Top Articles
        Latest Posts
        Article information

        Author: Manual Maggio

        Last Updated: 02/06/2023

        Views: 6111

        Rating: 4.9 / 5 (69 voted)

        Reviews: 84% of readers found this page helpful

        Author information

        Name: Manual Maggio

        Birthday: 1998-01-20

        Address: 359 Kelvin Stream, Lake Eldonview, MT 33517-1242

        Phone: +577037762465

        Job: Product Hospitality Supervisor

        Hobby: Gardening, Web surfing, Video gaming, Amateur radio, Flag Football, Reading, Table tennis

        Introduction: My name is Manual Maggio, I am a thankful, tender, adventurous, delightful, fantastic, proud, graceful person who loves writing and wants to share my knowledge and understanding with you.