how to add multiple google maps in wordpress

How to Add Multiple Google Maps in WordPress: A Complete Location Guide

If your business has several storefronts, you may wonder how to add multiple Google Maps in WordPress without messing up your layout. Therefore, we’ll show you two reliable methods that work with any theme.

How to Add Multiple Google Maps in WordPress Using a Plugin

First, a plugin offers the easiest route. Therefore, we recommend using WP Google Maps or Embed Plus for Google Maps because they handle multiple map blocks natively. For example, you can create unlimited maps and place them via shortcode or block. Moreover, if you want to know how to add multiple Google Maps in WordPress, this method is the most beginner-friendly.

Here are three steps to add multiple maps with a plugin:

  • Install and activate a mapping plugin.
  • Create a new map for each location.
  • Copy the generated shortcode and paste it into any page or widget.

Second, you can combine plugin shortcodes on a single page. In addition, most plugins provide a separate post type for maps, so your content stays organized. However, if you prefer a lighter approach, continue to the next section.

How to Add Multiple Google Maps in WordPress Without a Plugin

Next, you can use the embed code from Google Maps directly. This method is ideal for occasional use because it loads a lightweight iframe. For example, the official Google Maps Embed API documentation explains how to generate a simple embed without an API key.

Follow these steps to embed multiple maps:

  1. Open Google Maps and find your first location.
  2. Click 'Share' and select 'Embed a map'.
  3. Copy the iframe HTML code.
  4. In WordPress, add a 'Custom HTML' block and paste the code.
  5. Repeat the process for your other locations on the same page.

Now, you have several iframes stacked vertically. However, this method may slow down your page if you use many maps. As a result, we suggest lazy loading or using a plugin for heavy location pages.

Step-by-Step: How to Add Multiple Google Maps in WordPress

Third, let’s refine the iframe approach with a simple code snippet. Open your page’s block editor and add a 'Custom HTML' block for each map. Meanwhile, you can wrap the iframes in a CSS grid to display them side by side on desktop. For example, you can use a shortcode like `[googlemaps address="Street 1, City"]` to keep your code clean.

Finally, if you need many maps, consider Google Maps Platform with a free API key. Still, understanding how to add multiple Google Maps in WordPress without plugins is useful for quick edits. In addition, you can use the AJAX method to load maps dynamically, but that requires more advanced coding. Therefore, most beginners should stick with the plugin or iframe method.

Frequently Asked Questions

Can I show multiple Google Maps on one page in WordPress? Yes, you can either paste multiple embed iframes or use a plugin that adds shortcodes for each map. Both methods allow unlimited maps, though performance may vary.

Do multiple Google Maps slow down my site? They can, especially if you load many iframes at once. Use lazy loading or a plugin that loads maps only when they appear in the viewport.

Is there a way to customize markers on multiple maps? Plugins like WP Google Maps let you assign custom markers per location. With plain iframes, you cannot change markers unless you use the JavaScript API.

Read also