Adding Google Maps to Joomla

Mashing up with Maps

Today we wanted to add a map to our mockup library web site. One of the commonly asked questions of public libraries is where is branch x located? (and where can i park?). It is amazing how many library web sites make such commonly requested information so hard to find. Our students usability tests on library web sites provide the proof. Anyway, Google maps provide an elegant solution to the problem. So how do we add a map to our web site?

In the bad old days we would take a screen shot of a map in Microsoft Mappoint and added the static image to the web page. Today we want to hook up with the Google Maps application programming interface (API) to use it's functionality in our web application.

The beauty of Joomla lies in its open and extensible structure, someone needs a map function so they write a small plugin to provide it and all users benefit. Sweet. Off we go to the extensions site and download plugin_googlemap.2.12f.zip, a massive 216k file.

Installing Google Maps Plugin

1. Extensions, Install/Uninstall
2. Click Browse and select plugin_googlemap.2.12f.zip
3. Click Upload and install
4. Select Extension, Plugin Manager
5. Select Google Maps and enable
6. Click on Google Maps to edit

Note the box for a Google Maps API Key in the parameters section. We don't have a key so we need to get one.

Obtaining a Google Maps API Key

We go to http://code.google.com/apis/maps/signup.html to obtain a key. It wants the URL of our web site, assuming we are running a server and not a USB stick. No problem, we enter http://localhost as the URL and it works! We copy the very lengthy key which looks something like this:

ABQIAAAAYHDFlhuoA-3Ae04VLK3UlRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSl9L-Ted

but longer to a text file to keep a record of it. We also paste it into the Google API parameter box and then click SAVE.

Now we need to create an article and put in the code for the map which involves inserting a squiggly bracket { the word mosmap, a bunch of parameters seperated by a vertical pipe |, and a closing squiggly bracket }, something like this:

{mosmap width='300'|height='200'|lat='71.0'|lon='81.4'|Zoom='12'|etc etc}

What's Your Vector, Victor?

One of the parameters is the centered location of the map based on latitude and longitude (a very ancient GPS system). Most people do not know this address but it can be obtained from Google Earth by putting in an address. The lat of my current location is 43 degrees N 00'20.36" and the long is 81 degrees W 14'30.96" but in fact there is an easier way.

Alex Ashman has a great post that includes a neat trick - use Google maps to get your lat/long. Just find a place in google maps and then paste in the following javascript into the URL window and it returns the lat/long in the exact format used by the google maps plug-in!

My current location is (43.00569, -81.241991) so i add that to the {mosmap} tag along with some other options and SAVE the article. Of course it did not work the first time, the {mosmap code was visible, the problem is that the google maps code MUST be on a single line and it was hard to see if it was in the little editor window. When i used the 24" monitor full screen i saw the code was not a single line so i reformatted it and SAVEd again and it worked. When working on a small screen add tags at the end of the lines to fix the problem.

The author of the plug-in, Mike Reumer, has a web site that contains examples and some documentation. Here is a quick summary (edited slightly) of his explanations on the various options:

• Set width, height in pixels (400px) or a percentage (60%.) The default is pixels and you can leave off the px and it works ok
  
• Use lon and lat for the coordinates
  
• zoom can be anything as specified in the Google Maps API.
• zoomType, can be Small or Large, this controls the type of zoom function displayed. For no zoomcontrol use the None setting
  
• zoomNew, can be 1 for continuous zoom or 0 for click to center (the default is 0)
• zoomWheel, can be 1 for mousewheel zoom and 0 for no mousewheel zoom (the default is 0)
• mapType can be Normal (default), Satellite, Hybrid, Terrain or Earth
• showMaptype is 0 for no Maptype controls and 1 shows Maptype controls (the default is 1)
• Overview is 0 for no overview window in bottom right corner and 1 shows the overview and 2 for overview enabled but closed initially (the default is 0)
• text is for the marker, that will show on the map with a balloon. If you don't want to see the text, just set text=" and it will not display, the text is the data displayed above the location pin. Usually it would be used to display an address or hyperlink. A hyperlink is possible. Use the format: linkName. Don't use (double) quotes!
• marker is for opening the infowindow (1 default) or close the infowindow (0) initially
• dir for adding get directions form for a route at maps.google.com to the coordinates
• tooltip is for the marker to have a tooltip when the mouse is on the marker (don't use HTML)
• icon is the url to a icon for the marker so it can be different than the Google default
  
• address is for a address to search for the coordinates
  
• gotoaddr is for a searchfield and button so the user can search a address on the map (default 0)
• kml is for a url to a kmlfile to load as a overlay on the map for multiple markers or a route
• traffic is for showing traffic on the map (Only USA currently)
• align is for placement of the map in the content (left, right, center or none)
• lightbox is for placing a link/button to show a lightbox of the map (default 0)
• show is for making the map displayed (default 1) or not. With lightbox on then the map only appears in lightbox.