Blog

Ihre Anlaufstelle für Wissen, Nachrichten, Informationen oder sonstige Daten

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

How-to-Embed-A-Google-Map-In-A-Joomla-WebSite

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 3

With the help of a powerful Joomla page builder extension: JSN PageBuilder 3, 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 3 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. 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 and Advanced tabs.

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 Row 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 Device button.

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

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.

View JSN PageBuilder 3

Tips To Create GDPR Compliant Forms With JSN UniFo...
Update: JSN UniForm 4.1.9 comes with new features ...
 

Comments (2)

This comment was minimized by the moderator on the site

Hello Coroline,

Insightful and well thought out tutorial .

Thank you.

Scott

This comment was minimized by the moderator on the site

Thank you, Coraline! This tutorial is clear, concise, and easy to follow. I made a regular map module and installed it in minutes, just as you said could be done. Next I will try to make one in PageBuilder. I have looked at purchasing and using...

Thank you, Coraline! This tutorial is clear, concise, and easy to follow. I made a regular map module and installed it in minutes, just as you said could be done. Next I will try to make one in PageBuilder. I have looked at purchasing and using PageBuilder for a long time, but never did, because the written instructions are difficult to follow and the video is totally useless, serving only to totally confuse me as it whips through selections that are too blurry to see at such a fast pace to be completely useless as to possibilities. You have taken away some of the mystery.
Please, please do more of these on different topics! I would be especially interested to see what other things you could do with PageBuilder in detail.

Read More
There are no comments posted here yet

Subscribe for The lastest news

Follow our newsletter to join a big part of Joomla Community