MON - FRI 08:00 - 19:00 and EMERGENCY: 24/7 (GMT+7)

Embed a Google map on Joomla websites in less than 3 minutes

26-Dec-2019 Joomla Tutorials Read 5324 times

If you are running a Joomla website for a business, or any professional project, it is very necessary to embed a Google map on your site. A map is a good ‘navigator’ to get customers directly come to a brand’s address and improve the website credibility in visitors’ eyes.

Hence, this blog will guide you two ways to add a Google map to your website in a few minutes. Here we go!

Embed a Google map location with only Joomla!

1. Get a Google Map URL

  • Please go to https://www.google.com/maps
  • Enter the address in the search bar.In this case, I search for New York, USA.
  • Click Share and a small pop-up named “Share” appears on your screen.

get embed google map link 1

  • Then, please select the Embed a map tab (1) on the pop-up.

  • To choose the size of the map, please click on the “Medium” button (2) and customize the suitable size. In this case, I scale the map up to a new dimension: 1200x300 px.
  • Finally, please hit the “Copy HTML” button (3) to get the Google Map embedded code.

2. Embed the Google Map URL in a Joomla module

A Joomla module can be set up to appear in multiple site pages with a few simple steps. Here we go:

  • First, please log in to your Joomla! Administrator area, then go to Extensions on the menu bar -> choose Modules -> Click the New button to start with a new module.
  • Then, you need to select the type of that module. Here, it is the Custom type.
  • Next, on the bottom of the content area, please click Toggle editor button to change the content mode to the plain text because this editor mode can read the HTML format of the Google Map embedded code.

choose toggle editor

  • Then, you have to set the module name in the Title area.
  • On the content area, please press Ctrl/Cmd V to paste the Google Map embedded code in the content area.
  • On the right sidebar, click Select Position to choose the position to place the module in the website layout.

embed google map standard way1

  • To select what menu items display the map module in a Joomla website, please go to the Menu Assignment tab and tick on the box you want.
  • Hit the Save button to finish the module. Now, please go to your site to see the Google Map on the front end.

Final Words

We have known two simple ways to embed a Google Map on a Joomla website, and I hope you enjoy them both! If you have any better ideas for this topic, feel free to leave your comment here so that we can learn from each other. Thank you.

 

get best joomla templates

 

Rate this item (1 Vote)