How to Display Google Maps with Multiple Locations using Elementor? [Step-by-Step]

Looking for a simple to show multiple locations on Google Maps or want to display multiple addresses on Google Maps? You’ve landed on the right page!

Displaying Google Maps on your website is essential to building an excellent user experience as it helps users find your location and thus improves your organization’s credibility.

Many businesses have multiple addresses they want to show on Google Maps. With Elementor’s Maps widget, achieving this was not possible. But now, with the help of PowerPack’s Google Maps Elementor widget, one can easily display as many locations as they like.

In this article, I will explain how you can Display Google Maps with Multiple Locations using the PowerPack Google Maps widget for Elementor.

Display a Google Map With Multiple Locations Using Elementor

To display a Google Map, we will have to add the Google Map widget to any page on the site.

Before we proceed, make sure you’ve installed and activated Elementor and the PowerPack Pro plugin on the site.

If you are new to WordPress and just started using the Elementor page builder, our detailed guide on how to use Elementor will explain every detail and help you understand Elementor basics.

Now let’s start our tutorial.

Step 1: Launch Elementor Editor

Once you have installed and activated Elementor and PowerPack Addons on the site, head over to your WordPress Dashboard > Pages.

Now select the page on which you wish to add the Google Maps widget and click on the Edit with Elementor button.

Next, drag and drop the Google Maps widget in the Elementor editor. Make sure to check the PP icon on the right side of the widget.

As soon as you add the Google Maps widget, you’ll see the map appear with default settings.

The below screenshot shows what your page would look like after adding the Google Maps widget.

In order to integrate Google Cloud services and tools such as Google reCAPTCHA, Google Analytics, Google Maps, and many others, we need to generate API key(s) and place it into our WordPress.

To display Google Maps on our WordPress web pages, we also need to get an API key.

Generate the Google Maps API key for the PowerPack Google Maps widget

So, let’s see how you can generate the Google Maps API key for the PowerPack Google Maps widget.

Step 1: To begin with, go to the Google Maps Platform and click the blue Get Started button.

Note: Google Maps is a paid service, so to generate your Google Maps API keys, you need to create a billing account and add your card details.

Step 2: Next, you’ll be redirected to your Google Cloud dashboard. A popup box will appear; click on the CREATE BILLING ACCOUNT option.

Step 3: Next, you need to complete your account information and set up your billing profile.

Select the Country, choose the Account Type, add the Tax information, add your Name and address, Contact Information, and choose your Payment method.

When done, click on the SUBMIT AND ENABLE BILLING button.

Step 4: On the next account opening page, select the website.

Step 5: Go to the Maps API, select the Maps JavaScript API, enable maps on your website, then go to API Credentials and click Create Credentials. Choose the API key.

Step 6: The API Key will be generated. Copy the API key and head back to your WordPress website.

Now we need to add the Google Maps API to PowerPack Settings.

Add Google Maps API Key to PowerPack

Step 1: In your WordPress dashboard, click Elementor >> PowerPack.

Step 2: On the next page, under the Integration tabs, you can see the field for Google Map API key.

Paste the API you have copied and click on the save changes button.

PowerPack Google Maps Customization in Content Tab

Addresses: This is the first section of the Google Maps widget. Here you will see the options to add multiple addresses, set address title and description, and choose the map marker icon.

You can add as many locations as you want to display in Google Maps. For our example, I have added 4 locations/addresses, each of which has a custom Map marker icon, as visible in the screenshot below.

To add a location, head over to the Addresses tab in Google Maps > Content and click on “Add Item.”

Once you click on Add Item, you’ll see options to add the Latitude and Longitude of the Address along with the Address Title and Description.

You will further have the option to choose whether you want to show Info Window on page load or not. Info Window contains the Address Title and Description.

Finally, you can upload a Custom Marker Icon that displays the location on Google Maps. You can also define the size of the Marker Icon as per your requirement.

Settings: This section allows you to select the settings for Google Maps. You can choose Zoom Type as Auto or Custom, depending on your preference.

If you choose Custom, you can decide the Zoom level for your location. Besides Zoom Type, you can select different Map Types and Marker Animation for your Google Maps.

Different types of Maps are available, like Road maps, Satellite, Hybrid, and Terrain. Further, you can choose how you want to animate the Map Markers. You can either go with Drop or Bounce animations or simply stay away from animations. 

Our Google Maps Elementor widget has a lot of customization options that you can use to make your Map look amazing. For this tutorial, I am choosing Custom Zoom Type where Map Zoom is 8, Map Type is Road Map, and Marker Animation is None.

Controls & Map Style: In the Controls section, you can choose to enable or disable several types of Maps controls like Street View Controls, Map Type Controls, Zoom Controls, Fullscreen Controls, and Scroll Wheel Zoom.

Similarly, PowerPack’s Google Maps widget comes with different types of Map Styles that you can use to make your maps look amazing. The widget has Silver, Retro, Dark, Night, and Aubergine modes that you can use.

The widget also has an option where you can add JSON Style Code from Snazzy Maps or Maps Style and set up a Custom Design for your Google Maps. 

Also Read: How to Style Google Maps with Snazzy Maps Skin

For our example, we have enabled all the controls mentioned above and used Standard Map Theme, as shown in the screenshot below.

PowerPack Google Maps Customization in Style Tab

Map: Here, you can choose the alignment of the Description that appears in the Info Window. Further, you can also choose the width and height of Google Maps.

For this tutorial, I have chosen alignment as Left, the width of Google Map as 100%, and the height of Google Map as 500px.

Info Window: Here, we can set the width of the Info Window and padding inside the same. Further, we can customize the Color and Typography of the Title and Description in the Info Window.

For this tutorial, I have chosen the Title color of Location as Red and the Description color of Location as Blue.

We have also set different fonts and font sizes for the same, which is what our Google Maps widget looks like now.

Wrapping Up: How to Display Multiple Locations on Google Maps

As you can see, displaying Google Maps with multiple locations with PowerPack Google Maps widget was pretty quick and easygoing. 

PowerPack Google Maps widget lets you create astonishing and beautiful Maps for your website. You can also check out the Google Maps widget demo to get an insight into what you can do with the widget.

Get the Google Maps widget for Elementor with PowerPack, the best Elementor addon. PowerPack offers more than 70 creatively designed widgets that you can use to take your WordPress design to the next level.

Read Next: How to Build a High-converting Contact Page with Elementor