Adding a map with your address to your Joomla.com website is done easily thanks to the special inbuilt Google Maps module. You can practically place the module in any position of your website, but it is designed to look great as a header on your Contacts page or as a side element in your articles. You can also add an unlimited number of maps throughout your website. In this tutorial, we will show you how.

Locate the module and add your address

Go to Extensions -> Module Manager:

Google Maps is already installed, but has not been assigned a place where it should display in your template. To modify this, find the module named SiteGround – Google Map and click on it. You can use the search to find the relevant module as the list of modules might be long:

Enter the address you want to display in the Search address/point field:

You can write a real address, or choose the coordinates option:

Adding a map to your Contact page

In the Size section select Fixed from the drop-down menu and set a Height for the element (leave this at 300px for now if you are not sure what you are doing).

Make sure to select Custom position > Header from the Position drop-down menu, otherwise the map will not be visualized at all. Change the status to Published and click Save. The options page should look similar to this:

Next, click on the Menu Assignment tab. In Module Assignment, select Only on the pages selected from the drop-down menu and then in Menu Selection, mark the checkbox for the Contact page. It should look like this (do not forget to hit Save before you leave the page):

This is what the end result will look like on your live website:

Show Google Maps in a side column

Change the name of the module in the Title field as it will be displayed in the article where you publish it. If you do not want to display a title select Hide in the Show Title section:

In the Size section, select Responsive from the drop-down menu:

Make sure to select Custom position -> right (or left) from the Position drop-down menu, otherwise the map will not be visualized at all. Change the status to Published and click Save. The options page should be similar to this:

Next, click on the Menu Assignment tab. In Module Assignment, select Only on the pages selected from the drop-down menu and then in Menu Selection, mark the checkbox for the page/article where you want the map to appear. It should look like this (do not forget to hit Save before you leave the page):

This is what the end result will look like on your live website:

Adding multiple maps on your website

To have multiple maps on your website, you just need to copy an existing Maps module and edit the settings for the new map: