6.7 – Google Maps

Video Tutorial on How to Add Google Maps to Joomla

Video Transcription

The final page of our web site that really could do with a little bit more work is our Contact Us page. What we need to do is to add a Google Map to this page. I'm going to use a module to do that. Go to the Extension menu and select the Extensions Manager. If your screen does not look like this one then see the earlier video - Adding the Joomla Extension Installer There are many modules available to provide Google Maps but the one I am going to use is called BT Google Map. In the search box enter BT Google Map and click search. This is the one we want so click on it.

This module although its free you do have to create a registration in order to be able to download it. so you cannot install it directly. Click on the Register & Download link and you are redirected to the Bowthemes web site. Click on the Download button. and you can either register or login here. I have already registered so I am going to go ahead and login. You are now offered both a file, the module itself and a pdf manual. For now I am just going to download the module. Once you have saved the module to your computer you can close this web site and return to the administrator to install the module. Select the Upload Package file tab Choose the file we just downloaded and Upload & Install. Now that the module has been installed successfully let's go and configure it. Extensions, Module Manager We can see that the Google Map module has already been created although its not published yet and it hasn't been given a position. I don't want it to display BT Google Maps but as I don't want a title either I am just going to set the title to Hide.

I want it to display on the contacts page above the contacts in the same way that the slideshow did so that is Position-3 and now of course I need to set it to be Published. If I go the Menu Assignment tab I can see it is currently set to No pages so I need to change that to Only on the pages selected and unselect everything apart from Contact Us. If I click Save and go to my web site and refresh the page I can see that the map has appeared but its of New York and my Tea Shop is in Covent Garden, London. So go back to the administrator and go to the Module tab We can see lots of different options. Remember that golden rule. If you don't know what it is just leave it alone.

There are several different types of Google Maps you can choose. Hybrid, Roadmap, Satellite or Terrain Roadmap is the default and that's good enough for me. You can enter your location either as an Address or if you have them with the actual Coordinates. I don't know them so I'm going to put in my store's address. I can customize various other things such as the width and the height but I shall leave those as they are. and click on Save. So now when I return to my web site and refresh the page the map that's being shown is of Central London but there is no Marker to indicate exactly where on this map my shop is. So let's go back to the administrator and select the Marker Manager. Here we can create multiple Markers but we only need to create one for our shop. So let's click on Add Marker. Give the Marker a Title Again you have the choice of Address or Coordinates enter your address and we can also have an Info Window, a little pop-up. So I'm going to complete the pop-up and click on Create Marker. I'm going to Save go back to my web site and refresh the page.

We can see now we have a marker exactly where the store is and a little description box. Possibly in my case this is too zoomed out and I need to zoom in more. Of course the user can do that themselves by clicking on the icon. But maybe it will be better if I actually set the map itself to be this far zoomed in. So let's go back to administrator. Back to the Module tab. And on the Zoom if we change the zoom from 13 to 18 and press Save. Go back to the site and refresh We can we've zoomed right in to the part of London where my little Tea Shop lives.