Need Joomla hosting crafted with care and expert 24/7 support? Start Here!

6.7 - Google Maps

Video Tutorial on How to Add Google Maps to Joomla

Click CC to enable subtitles

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 your web site administrator The Help menu and go to the Joomla Extensions web site. There are many modules available to provide Google Maps but the one I am going to use is called BT Google Map. This is it here and I can once again see that its for Joomla 3.

This module although its free you do have to create a registration in order to be able to download it. Click on the Download link. Here is the Google Maps module and again click Download and you are 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 the Extensions site and go to the administrator to install the module. So thats Extensions and Extension Manager.

Choose the file we just downloaded and Upload & Install. Now that the module has been installed successfully lets go and configure it. Extensions, Module Manager We can see that the Google Map module has already created an instance here although its not published yet and it hasn't been given a position. I don't want it to display BT Google Maps but I don't want a title either so 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 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 Options for the module.

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 customise 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 lets go back to the administrator select Options scroll down and select the Marker Manager. Here we can create multiple Markers but we only need to create one for our shop. So lets 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 popup. So I'm going to complete the popup 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 lets go back to administrator. Back to the Options. 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.