This OpenCart tutorial shows you how to add a google map in contact us page of OpenCart without coding or programming knowledge, we will show you how to use the HTML content default OpenCart module and add the map in contact us page.

Let’s get started by going to https://google.com/maps then search your locations in it. Once you find the location

Find the location in google map

When you click the “Share” icon you will see a popup click “Embed a map” then click “Copy HTML”

Google map embed code

Now go to your store OpenCart admin >> Extensions >> Extensions >> Choose the extension type “Modules” >> Then scroll to see the “HTML Content”. If you see the green button here, first click to install it.

Add HTML content module for google map

Then, click the blue button to add new module.

Google map embed code
  • Enter the module name in “Module Name” field
  • Enter the title that you want to show in the front-end, you can leave it blank if you don’t need
  • Click the “Source Code” icon
  • Paste the google map HTML code
  • If you want full-width map then you have to change the width to 100%
  • Again click the Source code icon
  • Then click Save button

Now go to Admin >> Design >> Layouts >> Edit “Contact” then add the Google Map module in your desired position.

Then click save and see your front end.

You can see our demo here:

See Demo of Google map in Contact us page of OpenCart

Let us know if need any help

LEAVE A REPLY

Please enter your comment!
Please enter your name here