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, shows how Magento 2 store owners can integrate Google Maps into their websites effortlessly.

Without further ado, let’s dive in!

Why should you embed Google Maps to your website?

In 2020, more than, 1 billion people used Google Maps making Google Maps for companies an effective way to reach a large market. Making it easier for customers to find you is the main reason to add Google Maps to your website.

• Facilitate Location Search: Displaying store information with Google Map streamlines the customer’s search process, eliminating the need to open new windows or leave your site for directions. Shoppers can conveniently use the map directly on your website.

• Comprehensive Contact Information: Customers may find your store’s location, phone number, website, reviews, and star ratings on the linked Google Maps. Visitors to your shop using Google Maps may easily get this information.

• Extended Visitor Engagement: The integrated Google Map extends visitors’ stay on your site, allowing you to lead them through the sales funnel and maximize conversion. Successful internet sales need long-term user engagement.

• Highlight Nearby Points of Interest: Google Maps suggests local attractions to help visitors identify your position with respect to parks and restaurants. This real-life context boosts consumer impressions of your business.

• Targeted Traffic for Higher Conversions: Visitors who have looked for your service and discovered your listing on Google Maps are ready to purchase. Targeted traffic boosts conversion rates and website authority, improving search results.

• Boost Conversions with Visual Content: Sharing appealing photos, particularly customer-generated ones, affects online purchases. Impressive photographs on your Google Business Profile and favorable photo reviews boost trust, brand recognition, and conversions, resulting in high conversion rates.

Don’t lose any more business! You can think of the Google Map that is built into your site as a small GPS. People who are shopping get routes, and hot spots in the area right away, without having to leave your page. For brands with more than one site, it’s like a spotlight on each one, making you the hero of the town and increasing your exposure.

How to add a Magento 2 Google Maps?

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 to 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. 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 the exact latitude and longitude

With Protocol = Embed Code, you only have to insert the Google iframe code into 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 Maps, 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.

Related Post: Add Google Tag Manager to Magento 2

Google Maps for Magento 2

Effortlessly display your store's location for customers' convenience

Check it out!