Please follow the given steps:-
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: 100%x400px.
(You can choose the dimension of your choice). - 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 of your choice where you want to place the module in the website layout.
- To select which menu items will display the map module in a Joomla website, please go to the Menu Assignment tab and choose your menu page.
- Hit the Save button to finish the module. Now please go to your site to see the Google Map at front end. Here is the view of our Google map on the site created with JD Servx template:
