How to Add Google Map on a Magento 2 Page?

For those owning a physical storefront or location that serves a broader area, integrating Google Maps into their eCommerce sites can be a fantastic strategy.

Not only can this way help online shoppers make more informed decisions about an e-retailer, but it also creates unexpected business opportunities for online merchants.

This post today will zoom in on how embedding Google Maps can benefit eCommerce businesses. Most importantly, show how Magento 2 store owners can integrate Google Maps into their websites effortlessly.

Without further ado, let’s dive in!

Table of contents

• Why should you embed Google Map to your website?
• How to add Google Map in Magento 2 store?
  • Add Google Map in Magento 2 with default Page Builder
    • Step 1: Insert Google Map API key in the store backend
    • Step 2: Add Google Map in a specific Magento 2 page
    • Step 3: Add store’s locations to the map
    • Step 4: Change the map style
  • Add Google Map in Magento 2 page with free Google Maps extension
    • Step 1: Enable the extension at the backend
    • Step 2: Configure the map in the Map Settings section
    • Insert the map using Widget and Mageplaza extension
• The bottom line!

Why should you embed Google Map to your website?

The ultimate purpose of embedding a Google Map onto a website is to help customers locate the brand’s physical store effortlessly.

Though the interest of customers in shopping online has been increasing recently, there are still a huge number of shoppers who love visiting in-store rather than online.

An example of Google Map added in the Lotte hotel’s official website.

However, apart from informing customers about the store’s locations, adding a Google Map to your website comes with other vital reasons:

• Facilitate the searching process of customers for your store’s locations. In other words, they don’t have to open a new browser window, at the same time, leaving your site to find directions. Shoppers can directly use the map your site

• The embedded Google Map provides shoppers with full contact information of your business (phone number, website, reviews, star ratings, etc.). While viewing your store’s address via Google Map, customers can get other info right your site with no difficulty

• The embedded Google Map will keep visitors on your site for a more extended period of time, giving you the opportunity to lead them through the sales funnel to convert

• The Google Map usually recommends and highlights nearby points of interest, parks, restaurants, etc. Thus, visitor can better define your physical location in real life according to nearby areas

Basically, the embedded Google Map on a website functions as a fully functional Google Map app on smartphones. If customers have trouble locating your business, then they are always ensured to find you with Google Maps integration.

By showing your exact location as well as other contact info on Google Maps, you can make shoppers feel more reliable and confident when doing business with your site.

In case you have a chain of physical stores, the appearance of Google Map on your e-store is the fastest way to build your brand’s visibility and credibility in the form of highlighted points.

How to add Google Map in Magento 2 store?

Typically, most Magento 2 store owners will want to embed Google Maps on their About Us or Contact Us pages. By doing this, they can showcase their chain of physical stores as well as give directions for online visitors.

Unfortunately, the Magento 2 Community Edition doesn’t support the Google Map functionality. In other words, for this Magento Edition, you can still add Google Maps on a specific page of your site but require a proper Magento 2 extension to help you do that.

Don’t worry! With Google’s API, integrating a Google Map to a web page in your site has been more comfortable than ever before.

Add Google Map in Magento 2 with default Page Builder

For Commerce Edition, Magento 2 allows merchants to add a Google Map block to the store’s About Us and Contact Us pages via the built-in Page Builder features.

However, to add a Google Map to Magento site, you have to create a billing account or a project on Google Maps Platform, as well as activate Google Map Javascript API. After finishing all these tasks, you will get your API key and ready for further configuration in Magento 2.

Step 1: Insert Google Map API key in the store backend

• Log into the Admin dashboard, choose Stores > Settings > Configuration > Content Management > Advanced Content Tools

• Paste your API key to the Google Maps API Key field and click on the Test Key button. This step makes sure your API key is correct and usable

If you still don’t know how to get the API key, follow Google Maps’ instructions.

Step 2: Add Google Map in a specific Magento 2 page

• In the left sidebar, go to Content > Pages

• Next, choose the page you want to add the Google Map and select Edit on the Action column. Now, the Page Builder will appear within the Content section of the selected page

• In the Page Builder panel, choose Media. Drag and drop the Map selection to the stage. Here, if the Google Maps Platform is not configured for your store, the map won’t appear

Step 3: Add store’s locations to the map

• Move your mouse to the map container to see the toolbox. And click the Setting icon to open the Edit Map page

• In the upper-right corner, click on the Add Location button

• Location Name: Fill in the location name that will be associated with the displayed map

• Coordinates: Give the exact coordinates of your wanted location in Google Maps

• Complete other information related to your business that you want to associate with the map location

Note: You can get any location’s coordinates by the following steps:

• Open the Google Maps website

• Search for your location

• Get your store’s coordinates in the URL

Step 4: Change the map style

• Select Stores > Settings > Configuration > General > Content Management > Advanced Content Tools

• Click the Create Map Style under the Google Maps Style text box

• Select Create a Style and set the map to your wanted style (for instance, the density of features on the map, select map theme, etc.)

• When finish, click on the Finish button

• Export the finished style as JSON code or as a URL, then add it to the Magento 2 configuration

• Paste that code into the Google Maps Style box

• Click on the Save Config button to display the generated map on your website

Add Google Map in Magento 2 page with free Google Maps extension

In the available scope of this post, we will talk about a free Google Maps extension from Mageplaza. This free extension helps merchants (who use Open Source Edition) to display the store’s locations with effortless configuration.

Step 1: Enable the extension at the backend

• Open Stores > Configuration > Mageplaza Extensions > Google Maps > General

• Choose Enable = Yes to activate the Google Maps module

• To insert the map on the Contact Page:

• In the General section, select Insert on Contact Page = Yes, the Google Map will be automatically inserted on the website’s Contact Page

• Set the display position of the Google Map on the Contact Page in the Position field with 2 selections: Top and Bottom

Step 2: Configure the map in the Map Settings section

With Protocol = API, the next configurations are:

• Google API Key: Insert in this field your Google API Key

• Map Type: Select one out of 4 supported map types to display on the storefront, including Roadmap, Terrain, Satellite, and Hybrid

• Map Style: Pick your wanted display style for the map

• Allow Map Dragging = Yes to allow dragging and dropping on the maps

• Zoom Default: Set the default zoom when loading maps

• Marker Icon: Marker icon on the maps. (Recommend having your icon with size as 20x20 px.

• In the Location Settings section, enter the address to show on the map. Click the GPS coordinates button to faster locate the store’s address with exact latitude and longitude

With Protocol = Embed Code, you only have to insert the Google iframe code to the Code field.

Insert the map using Widget and Mageplaza extension

With the support of Widget in Magento 2, you can embed Google Maps anywhere on your website. To configure the widget for adding Google Map, you need to:

• Content > Elements > Widgets > Add Widget

• Select Type = Mageplaza Google Maps, Design Theme = Magento Luma

• Once complete, click on Continue

• Fill in all the required fields in the Storefrontend Properties section

• Pick the position you want to display the widget

• Then, go to Layout Updates > Add Layout Updates

• Finally, choose Save > System > Cache Management > Flush Magento Cache

The bottom line!

Today’s consumers take Google Maps as vital guidance and decision-marketing assistance in the form of addresses, contact details, and brands’ ratings.

If you intend to grow your business in the future, having your location shown up in Google Maps is necessary to grow your business as its popularity increases among modern users.