Embed with Joomla Custom module

Step 1: Get a Google Map URL

1.1 - Go to https://www.google.com/maps

1.2 - Enter the address in the search bar. In this case, I search for New York, USA.

1.3 - Click Share and a small pop-up named “Share” appears on your screen.

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

1.5 - To choose the size of the map, click on the “Medium” button (2) and customize the suitable size. In this case, we scale the map up to a new dimension: 1200x300 px.

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

2.1 - First, in Joomla Admin, go to Extensions -> choose Modules -> Create new Custom type module.

2.2 - Next, on the bottom of the content area, click Toggle editor button. Because this editor mode can read the HTML format of the Google Map embedded code.

2.3 - On the content area, copy Google Map embedded code in the content area.

2.4 - Remember to Select Position and Set Title for the module.

2.5 - Go to the Menu Assignment tab to select which menu items display the map.

2.6 - Hit the Save button.

Now, you can 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 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 is the end product:

Step 1: 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

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

2.2 - Then, use Google map on the Element feature, and drag-and-drop that element on the first column.

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

2.4 - To change the map dimension, borders, animation, or other advanced settings, 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 chose 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.

3.1 - To set the background color for the whole Google map module,

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:

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

3.3 - To separate each element clearly, you should set the value for margins.

3.4 - Don’t forget to check the responsiveness of the module

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

4.1 - Choose a module position and assign the module to menu items, which have been mentioned in the first way above.

4.2 - Hit Save and everything is done!