This plugin allows you to include one or more driving, walking or bicycle directions provided by Google Maps right inside your content item or article.

This is a light-weight plugin using only about 20K of codes.

If you need to display driving or walking directions to your company, or from one place to another, this is the plugin.

If you want to allow users to find ways to your office or some designated place, use the googleDirections - To Here - plugin

• Uses the latest Google Maps API v3
• You can embed multiple Google Directions within an article
• Each Google Direction can be of different size, map control and map type
• Support for kml files
• You can specify the starting, ending and stopover points using real address or longitude/latitude points
• Built-in street view!
• Support for multiple waypoints or stopover points
• Support for many native languages e.g. Italian, Russian, French
• Available for all Joomla versions: Joomla 1.0.x, native 1.5.x, 1.6.x, 1.7.x and 2.5.x!

User Review

This plugin is listed in the The Joomla! Extensions Directory: See User Review

If you like this plugin, please post a review at the Joomla! Extensions Directory

Geocoding your address

If you wish to know the latitude and longitude of your start point or end point, you can find out here: Free Geocoder v2.0 by kksou.

This plugin is for showing directions using Google Maps API.

If you just need a simple map (without any driving directions), you can use the googleMaps plugin.

If you want to allow users to find ways to your office or some designated place, use the googleDirections - To Here - plugin.

Below you can see a live demo of the plugin. Note that you can include more than one map directions within an article.

Demo 1: Driving Directions from Google to Yahoo

tag used: {googleDir width=400 height=360 dir_width=275 from="1600 Amphitheatre Parkway, Mountain View CA 94043" to="701 First Avenue, Sunnyvale, CA 94089"}

Demo 2: Walking Directions from Union Square to Ghirardelli Square, San Francisco

tag used: {googleDir width=360 height=360 dir_width=275 mode=walking from="333 Post St, San Francisco, CA 94108" to="900 N Point St, San Francisco, CA 94109"}

Demo 3: Driving Directions using map from KML file

tag used: {googleDir lat=21.279491 long=-157.744741 zoom=14 from="21.271685,-157.822852" to="21.26013471,-157.8183115" kml=http://www.kksou.com/gmap/test/kml_sample4.kml}

More Demos

• Google Maps + Directions sample 1. shows two maps - one with driving directions, and the other with walking directions.
• Google Maps + Directions sample 2. shows two maps - one with the driving directions on the left (the default), and the other with the driving directions on the right.
• Google Maps + Directions sample 3. shows how you can show your office location map - together with the driving and walking directions from one place to your office.
• Google Maps directions using geographical coordinates (i.e. longitude and latitude)
• Google Maps directions for multiple destinations using geographical coordinates
• Google Directions with Multiple Stopovers

1. Specify the Start and End Points. To insert a Google Map with directions, use the following syntax:

{googleDir from="1600 Amphitheatre Parkway, Mountain View CA 94043" 
to="701 First Avenue, Sunnyvale, CA 94089"}

[Live Demo]

Note that:

• Enclose from and to in double quotes (")
• Enter the full address in one line. If you're not in US, specify your country too.



2. Width and Height. To specify the width and height of the map, use the following syntax. Note that for Google Map with directions, you cannot specify the width and height in percentages.

{googleDir width=480 height=360 
from="1600 Amphitheatre Parkway, Mountain View CA 94043" 
to="701 First Avenue, Sunnyvale, CA 94089"}

[Live Demo]
3. Zoom level. Note that the default zoom level of the map is automatically set by Google such that the start point and end point are being displayed optimally on the map.
[Live Demo]
4. KML Files: To use kml files, use the following syntax:

{googleDir lat=53.91081 long=-2.565308 width=480 height=360 zoom=9 
from="Glasgow, UK" to="Manchester, UK" 
kml=http://econym.googlepages.com/lancashire.kml}

Note that when you use kml files, you have to specify the latitude and longitude of the centre of the map.

5. Map Control: You can use the various map control as defined in Goolge Maps Controls Overview. For example, to use the large pan/zoom control as now used on Google Maps, use the following syntax:

{googleDir control=GLargeMapControl3D
from="1600 Amphitheatre Parkway, Mountain View CA 94043" 
to="701 First Avenue, Sunnyvale, CA 94089"}

You can add multiple controls by delimiting with '|' as follows:

{googleDir control=GLargeMapControl|GMapTypeControl
from="1600 Amphitheatre Parkway, Mountain View CA 94043" 
to="701 First Avenue, Sunnyvale, CA 94089"}




Other common map controls are as follows:

• GLargeMapControl3D - a large pan/zoom control as now used on Google Maps. Appears in the top left corner of the map by default.
• GLargeMapControl - a simpler large pan/zoom control. Appears in the top left corner of the map by default.
• GSmallMapControl - a smaller pan/zoom control. Appears in the top left corner of the map by default.
• GSmallZoomControl3D - a small zoom control (with no panning controls) as now used on Google Maps.
• GSmallZoomControl - a small zoom control (no panning controls) used in the small map blowup windows used to display driving directions steps on Google Maps.
• GScaleControl - a map scale
• GMapTypeControl - buttons that let the user toggle between map types (such as Map and Satellite)
• GHierarchicalMapTypeControl - a selection of nested buttons and menu items for placing many map type selectors.
• GOverviewMapControl - a collapsible overview map in the corner of the screen

For complete list, please refer to Goolge Maps Controls Overview.

6. Map Type: You can use the various map type as defined in Common Map Types.

For example, to display a Google Earth satellite image, use the following syntax:

{googleDir control=GLargeMapControl3D maptype=G_SATELLITE_MAP
from="1600 Amphitheatre Parkway, Mountain View CA 94043" 
to="701 First Avenue, Sunnyvale, CA 94089"}

Other common map types are as follows:

• G_NORMAL_MAP displays the default road map view
• G_SATELLITE_MAP displays Google Earth satellite images
• G_HYBRID_MAP displays a mixture of normal and satellite views
• G_DEFAULT_MAP_TYPES contains an array of the above three types, useful for iterative processing.

For complete list, please refer to Common Map Types.

7. Language option. The Google Maps API uses the browser's preferred language setting when displaying textual information such as the names for controls, copyright notices, and driving directions. If you wish to change the Maps API to ignore the browser's language setting and force it to display information in a particular language, you can add an optional lang parameter.

e.g. to display the Goolge Maps control in Russian, use:

{googleDir width=400 height=360 dir_width=275 lang=ru
from="1600 Amphitheatre Parkway, Mountain View CA 94043"
to="701 First Avenue, Sunnyvale, CA 94089"}

[Live Demo]

To display the Goolge Maps control in Japanese, use:

{googleDir width=400 height=360 dir_width=275 lang=ja
from="1600 Amphitheatre Parkway, Mountain View CA 94043"
to="701 First Avenue, Sunnyvale, CA 94089"}

[Live Demo]

You can look up the entire list of supported languages here.

8. Travel Modes. To insert a Google Map with walking directions (as oppose to driving), use the following syntax:

{googleDir mode=walking
from="1600 Amphitheatre Parkway, Mountain View CA 94043" 
to="701 First Avenue, Sunnyvale, CA 94089"}

[Live Demo]

To insert a Google Map with bicycling directions (Note: currently only available in the US, use the following syntax:

{googleDir mode=bicycling
from="1600 Amphitheatre Parkway, Mountain View CA 94043" 
to="701 First Avenue, Sunnyvale, CA 94089"}

[Live Demo]

The default mode (when you don't specify any mode) is driving.

9. Directions on Left. By default, the map will be shown on the left and the directions on the right. If you want to swap this and have the directions displayed on the left, use the following syntax:

{googleDir map_on_right=1
from="1600 Amphitheatre Parkway, Mountain View CA 94043" 
to="701 First Avenue, Sunnyvale, CA 94089"}

[Live Demo]
10. Directions below Map. By default, the map will be shown on the left and the directions on the right. If you want to have the directions displayed below the map, use the following syntax:

{googleDir vertical=1
from="1600 Amphitheatre Parkway, Mountain View CA 94043" 
to="701 First Avenue, Sunnyvale, CA 94089"}

[Live Demo]
11. Hide Directions (Display Map Only). If you wish to hide the text description on the right of the map, use the following syntax:

{googleDir hide_direction_text=1
from="1600 Amphitheatre Parkway, Mountain View CA 94043" 
to="701 First Avenue, Sunnyvale, CA 94089"}

You can see a sample here: Show map directions with maps only (and text description hidden) .

12. Units for Distance. To display the distance as miles, use the following syntax:

{googleDir width=360 height=360 dir_width=275 unit=IMPERIAL
from="333 Post St, San Francisco, CA 94108" 
to="900 N Point St, San Francisco, CA 94109"}

[Live Demo]

To display the distance as kilometers, use the following syntax:

{googleDir width=360 height=360 dir_width=275 unit=METRIC 
from="333 Post St, San Francisco, CA 94108" 
to="900 N Point St, San Francisco, CA 94109"}

[Live Demo]

To have a Google Map Directions with multiple destinations or stopovers, please refer to the following article:

Google Maps directions with multiple destinations

If you find the plugin useful and would like to use the plugin without the "Powered-by" links, you may do so by purchasing a "Powered-by" removal license for only USD $10 per site.

Secured payment is processed by 2checkout.com. All major credit cards are accepted, including Visa, Mastercard and American Express, etc. You can also pay by PayPal. Once the transaction is completed, you will be given a link to download the version with the "Powered by" links removed.

• v1.0 (for Joomla 1.0) and v1.5 (for Joomla 1.5)
  Released May 11, 2009

• v1.02 (for Joomla 1.0) and v1.52 (for Joomla 1.5)
  Released May 14, 2009

Thanks to Nina and Warren for highlighting that the plugin does not work in IE. A quick google will reveal that this seems to be a prevalent problem especially with IE6.

Have fixed this in the new version. The googleMaps and googleDirections plugins now work with IE6 and above.

Note that rendering of the Google Maps in IE6 is relatively slower than that in other browsers. So please be a bit patient. Also it seems that in IE6 the map marker icons (the little red teardrops) were not rendering properly.

• v1.03 (for Joomla 1.0) and v1.53 (for Joomla 1.5)
  Released May 21, 2009

Bug fix: when swapping the map and directions from left to right, the headings are now displayed correctly.

• v1.04 (for Joomla 1.0) and v1.54 (for Joomla 1.5)
  Released May 25, 2009
• support for geographical coordinates (i.e. longitude and latitude)
• support for multilines i.e. you can specify multiple destinations across multiple lines
• added GOverviewMapControl, GScaleControl, GoogleBar
• You can now display both the googleMaps and googleDirections in the same article.

• v1.05 (for Joomla 1.0) and v1.55 (for Joomla 1.5)
  Released May 27, 2009

uses googleMaps plugin for map display

• v1.06 (for Joomla 1.0) and v1.56 (for Joomla 1.5)
  Released May 28, 2009
• added new parameter header_map - The default heading displayed above the map is the English word "Map". You can now change this to your own language.
• added new parameter header_dir - The default heading displayed above the directions is the English word "Directions". You can now change this to your own language.
• added new parameter header_directions. By default, the map is displayed on the left and the directions on the right. To make the map appear on the right, set map_on_right=1

Important: the googleDirections plugin now makes use of the googleMaps plugin to display the map. So please make sure you have installed the googleMaps plugin for this plugin to work.

• v1.07 (for Joomla 1.0) and v1.57 (for Joomla 1.5)
  Released Jun 1, 2009

Added support for the plugin googleDirections - To Here - plugin

• v1.08 (for Joomla 1.0) and v1.58 (for Joomla 1.5)
  Released Oct 1, 2009

This is in response to Gasta's post titled "GoogleDir without directions!"

He would like to display the google map with multiple destinations, but hide the text description on the right.

This new version supports this with the addition of the new parameter: hide_direction_text=1

You can see a sample here: Show map directions with maps only (and text description hidden) .

• v1.68 (for Joomla 1.6) and v1.78 (for Joomla 1.7)
  Released Oct 20, 2011

Native version of the googleMaps plugin for Joomla 1.6 and Joomla 1.7!

Also, support for PHP v5.3.8 for both Joomla 1.6 and Joomla 1.7.

• v1.09 (for Joomla 1.0), v1.59 (for Joomla 1.5), v1.69 (for Joomla 1.6), v1.79 (for Joomla 1.7)
  Released Nov 15, 2011

Now uses Google Maps API v3!

Key advantages in Google Maps API v3 includes:

• Built-in street view!
• You no longer require the Google API Key - what this means is that you can now access the google maps from your local machine!
• Google now provides road directions by bicycle!
• v1.0.10 (for Joomla 1.0), v1.5.10 (for Joomla 1.5), v1.6.10 (for Joomla 1.6), v1.7.10 (for Joomla 1.7)
  Released Dec 24, 2011

New Features:

• Support for multiple stopovers!
• Support for vertical alignment
• Added 3 more tags: stopover, vertical and map_full_width
• Added unit: metric / imperial
• v1.0.11 (for Joomla 1.0), v1.5.11 (for Joomla 1.5), v1.6.11 (for Joomla 1.6), v1.7.11 (for Joomla 1.7)
  Released Jan 03, 2012

Thanks to feedback from Florian who found out that the reverse geocode lookup by Google sometimes do not gives the right mapping. Have modified the code so that the googleDirections plugin now maps the exact location when latitude/longitude are given for the starting, ending and stopover points.

v1.0.12 (for Joomla 1.0), v1.5.12 (for Joomla 1.5), v1.6.12 (for Joomla 1.6), v1.7.12 (for Joomla 1.7), v2.5.12 (for Joomla 2.5)
Released Jan 26, 2012

Native version of the googleDirections plugin for Joomla 2.5!