![]() Like in this image below, I set the margins for the second paragraph: To separate each element clearly, you should set the value for margins.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 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:.You can find them easily on the Element feature. All the elements at this column are one heading, two paragraphs, and one button. In the second column, I am going to create a block of information called “ Our Place”. Also, you can add the working hours in order to let your site visitors know when to contact. You can share a story about why you choose this place for the company (or brand), or what makes the staff enjoy that place. Step 3: Add detailed information for the mapĪ 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. To change the map dimension, borders, animation, or other advanced settings, please go to the Styling tab.To set a location, please insert an address at the Location area.Then, please find Google map on the Element feature, and drag-and-drop that element on the first column.In this case, I chose the ⅔ ⅓ layout because I intend to have the map bigger than the text area. Read more: How to set up layout in Joomla Firstly, we have to define a layout for the Google Map and its related information.Step 2: Insert a Google Map to the module Here we go:Ĭreate a new custom Joomla module and select JSN PageBuilder 4 as the editor mode. 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 is my Google map on the site created with JSN Vintage 2 template:Įmbed a nice Google Map with JSN PageBuilder 4 Now, please go to your site to see the Google Map on the front end. Hit the Save button to finish the module.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.On the right sidebar, click Select Position to choose the position to place the module in the website layout.On the content area, please press Ctrl/Cmd +V to paste the Google Map embedded code in the content area.Then, you have to set the module name in the Title area.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 need to select the type of that module.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.Step 2: Embed the Google Map URL in a Joomla moduleĪ Joomla module can be set up to appear in multiple site pages with a few simple steps. Finally, please hit the “ Copy HTML” button (3) to get the Google Map embedded code.In this case, I scale the map up to a new dimension: 1200x300 px. To choose the size of the map, please click on the “ Medium” button (2) and customize the suitable size.Then, please select the Embed a map tab (1) on the pop-up.Click Share and a small pop-up named “ Share” appears on your screen. ![]() In this case, I search for New York, USA. Here we go! Embed a Google map location with only Joomla! Step 1: Get a Google Map URL Hence, this blog will guide you two ways to add a Google map to your website in a few minutes. A map is a good ‘navigator’ to get customers directly come to a brand’s address and improve the website credibility in visitors’ eyes. 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.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |