How to add a Google Map to your Joomla website

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 Googlemapsis 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.

javascript:void(prompt(”,gApplication.getMap().getCenter()));

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!

mosmap address=’street, zipcode place,country’|dir=’1|lat=’40.75671′|lon=’-73.98646′|zoom=’4′

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!

 

The source of this article is: http://www.goodwebpractices.com/
Here is the article in its original form:
http://www.goodwebpractices.com/joomla/add-a-google-map-to-your-joomla-website.html

Popularity: unranked [?]

No tags for this post.