Google maps is a fantastic free tool that can have a number of uses for your Joomla website, perhaps most importantly to show your site visitors where you business is located or where local sites of interest might be.
This tutorial goes through the installation of the "Plugin Googlemaps" extension for Joomla 1.5.
Plugin Googlemaps
Plugin Googlemaps
is a free extension available for Joomla (1.0 and 1.5) which makes it really easy to add in a Google Map to your Joomla website. Installation only takes a few minutes and the maps can be easily customised to suit your needs. Here is an example of a typical simple map you can add (sadly we aren't really based in Times Square!).
As you can see it has most the flexibility of the standard google maps, allowing users to zoom in and out and of course to move around the map as needed.
Joomla 1.5 Legacy Mode
The first step in the installation process is to enable Legacy Mode in Joomla (you only need to do this is you are using Joomla 1.5, if you are running an older version you can skip to the next step). This can be accessed by going to the 'Plugin Manager' under 'Extensions' in the top navigation bar once you have logged into the backend.
It's as simple as clicking on 'enable' next to 'System - Legacy'. Once this is done you should see 'Legacy 1.0' appear in the top right of your screen.
Plugin Installation
After downloading Plugin Googlemaps from here, go to 'Extensions' then 'Install/Uninstall'. In the 'Upload Package File' select the zip file you have just downloaded and then click on 'Upload File and Install'.
Once this is done, return to the 'Plugin Manager', and you need to enable the 'Google Maps' plugin.
Google Maps API Key
In order to use Google Maps, you need an API key for each website you intend to publish the map upon. The API key can be obtained from this page once you agree to the terms and conditions and enter the URL of your website. You then need to copy the long string of numbers and paste them into the 'Google API Key' section of the parameters of the plugin. Click on apply and ensure the plugin is enabled. You are now ready to add a map to your site!
Latitude and Longitude Coordinates
The first step to customising your map is of course to set the geographical location that the map shows. This is done by setting the latitude and longitude coordinates within the code that you paste into your content. This can be obtained through Google Earth, however the quickest way to do this is to visit Google Maps and enter the location you want, through an address, postcode or place name. Once the page has finished loading and the correct location is shown, copy and paste the following into your navigation bar of your menu and press enter.
A window will pop up giving you the latitude and longitude of your desired location. These are the coordinates you need to place into the code.
Plugin Code
The map at the top of the page was created by adding in the following code, using the coordinates for Times Square. I have removed the {...} which need to surround the entire section otherwise it would post a map. The paragraphs I have added for formatting reasons also need to be removed. The code can be posted anywhere in the body of your html and once inserted will show up as a map on your page. The whole process is very simple.
mosmap
width='500'|height='400'|lat='40.75671'|lon='-73.98646'|zoom='3'|
zoomType='Large'|zoomNew='3'|mapType='map'|
showMaptype='1'|
overview='1'|text='Good web practices'|lang=''
The code is fairly self explanatory in terms of customisation, but a full breakdown of the different parameters can be found here. The best idea is to play with each of the values and reload the map to see how they effect it. There is alot of detailed information on how to add more features to your map, such as directions and route plans on the developer's site which can be found here.
Directions
Having generic directions for your customers is great, but it is a lot more useful for them to be able to plan their route door to door. Using the following code, the plugin will enable users to put in their postcode or address and a new page will load up with full directions on Google Map (remember to add in {...} again!
We have certainly found this tool to be extremely easy to implement within a Joomla site, so a big thanks to the developer Mike Reumer!
Please check out the official Google Pluginmaps Website
for more examples of the plugin's use, demos and documentation!
6 Comments
Steve | Hannisdal Express
March 21, 2008 Votes: +1
Hey guys, good site here. David, I'm finally getting around to commenting on your site! Just wanted to share an experience I had with Google maps.
If you have a site with a lot of transparent pics (such as png32 pics) and are using the Alpha Transparency filter that a lot of IE6 transparency fixes use, you won't be able to use Google maps. For some reason it creates an overflow in the Google maps API.
For instance, I used Dimensions from RocketThemes on the most current site we did. Dimensions uses a lot of transparency and when I tried to use Google maps I ran into variable overflows - I think that is what it was.
I did find a guy that coded a Javascript fix to the transparency issue, which he coded to get around this exact problem. The site is here:
I got it to work, but it was making the site slow. Anyways, just wanted to pass that along. In the future I'm just going to avoid massive transparency like that of Dimensions. It looks cool, but causes WAY to many problems.
Take care guys...
Steve
report abuse
vote down
vote up
Alex A
March 26, 2008 Votes: +0
Awesome thanks for the info! I have another google maps plugin I hope to review soon too!
Steve | Hannisdal Express
March 27, 2008 Votes: +0
You're welcome. Another thing to keep in mind is that a lot of Joomla modules/plugins use the Mootools library, and this IE fix uses JQuery. I remember I had to do some messing around with it to get it to work, but I honestly don't remember what I did. I think if you search for JQuery, they have a website that details what to do if you are using multiple libraries like that...
Steve
report abuse
vote down
vote up
David T
March 28, 2008 Votes: +0
Hi Steve! Thanks for your tips transparency and Google maps! Thrashing out transparency bugs can be a real pain!
report abuse
vote down
vote up
Chris
May 12, 2008 Votes: +0
Just uploaded the extension. Doesn't work for me.
The {mosmap} tag is not being replaced by the map - just see the tag. I have installed as per instruction (but first time didn't do the legacy setting).
Using latest Joomla 1.5.
Weird. Thought I knew Joomla, but this one has me stumped.
Wouldn't call this a true 1.5 native, as it needs the legacy mode on to install.
Google maps is a fantastic free tool that can have a number of uses for your Joomla website, perhaps most importantly to show your site visitors where you business is located or where local sites of interest might be.
6
March 21, 2008
Votes: +1