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

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!

Step 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.

• 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.

Step 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.

• 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.

• 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. Here is my Google map on the site created with JSN Vintage 2 template:

Embed a nice Google Map with JSN PageBuilder 4

With the help of a powerful Joomla page builder extension: JSN PageBuilder 4, there is no limitation to prevent your creativity to have a beautiful Joomla web page embedded with a Google Map. Here we go:

Step 1: Let’s start with a blank module

Create a new custom Joomla module and select JSN PageBuilder 4 as the editor mode.

Step 2: Insert a Google Map to the module

• Firstly, we have to define a layout for the Google Map and its related information. Read more: How to set up layout in Joomla
  In this case, I chose the ⅔ ⅓ layout because I intend to have the map bigger than the text area.

• Then, please find Google map on the Element feature, and drag-and-drop that element on the first column.

• To set a location, please insert an address at the Location area.

• To change the map dimension, borders, animation, or other advanced settings, please go to the Styling tab.

Step 3: Add detailed information for the map

A map itself tells where the brand is located, but it would be more interesting with a short story, or some extra information describing your place in more detail. You can share a story about why you choose this place for the company (or brand), or what makes the staff enjoy that place. Also, you can add the working hours in order to let your site visitors know when to contact.

In the second column, I am going to create a block of information called “Our Place”. All the elements at this column are one heading, two paragraphs, and one button. You can find them easily on the Element feature.

• To set the background color for the whole Google map module, please select the whole module (at the Section level) -> choose the Styling tab -> find Background and select any color (or image) to be the background like in this image:

• To align all the elements to be in the middle of the second column, please click on the column and set the Center alignment.

• To separate each element clearly, you should set the value for margins. Like in this image below, I set the margins for the second paragraph:

• Don’t forget to check the responsiveness of the module by clicking on the All Device button.

• Also, Remember to enable Theme Styling to check how the design will look when publishing.

Step 4: Display the Google Map module on the Joomla site

• Firstly, please click the Exit FullScreen button to return the default Joomla back-end.
• Then, you have to choose a module position and assign the module to menu items, which have been mentioned in the first way above.
• Finally, please hit Save and everything is done!

Read more: Install Google Analytics In Joomla - Step-by-Step Guide

View JSN PageBuilder 4

Final Words

We have known two simple ways to embed a Google Map on a Joomla website, and I hope you enjoy them both!

Besides, if you are enjoying our PageBuilder 4 extension, have a look at our JSN templates which are working perfectly with it to build awesome websites. 

Finally, 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.