googleDirections plugin

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 that uses the latest Google Maps API.

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

Note: If you want to use this content plugin inside a Custom HTML Modules, please refer to this article: How to Run Joomla Content Plugins in Custom HTML Modules.


Unique Features

  • Uses the latest Google Maps API v3
  • Support for mobile and responsive design!
  • Support for different transportation mode - DRIVING / BICYCLING / TRANSIT / WALKING
  • 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, 2.5.x and 3.0.x!

User Review

This plugin is listed in the The Joomla! Extensions Directory: googleDirections plugin

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

Latest Version

v1.0.20 (for Joomla 1.0), v1.5.20 (for Joomla 1.5), v1.6.20 (for Joomla 1.6), v1.7.20 (for Joomla 1.7), v2.5.20 (for Joomla 2.5), v3.0.20 (for Joomla 3.0 and above)
Released Jul 23, 2017

Display warning message when Google returned zero results for directions. This could happen when Google cannot decode the address, or Google cannot find a valid route from Point A to Point B.

v1.0.19 (for Joomla 1.0), v1.5.19 (for Joomla 1.5), v1.6.19 (for Joomla 1.6), v1.7.19 (for Joomla 1.7), v2.5.19 (for Joomla 2.5), v3.0.19 (for Joomla 3.0 and above)
Released Jul 20, 2017

  • Support for responsive design!
  • For larger screen, the map and the direction will be placed side by side - map on the left, directions on the right
  • For smaller screen (e.g. mobile), the map will be displayed on the top and the directions below the map
  • For iPad and iPhone 6/7 Plus, the landscape mode will show the map and directions side by side, and the portrait mode will show the map on top and directions below.

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.

googleMaps Plugin

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.

googleDirections - To Here - plugin

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

Live Demo

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

How to use

Tutorials

  1. Specify the Start and End Points. To insert a Google Map with directions, use the following syntax:
  2. {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.


  3. 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.
  4. {googleDir width=480 height=360 
    from="1600 Amphitheatre Parkway, Mountain View CA 94043" 
    to="701 First Avenue, Sunnyvale, CA 94089"}
    
    [Live Demo]

  5. 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.
  6. [Live Demo]

  7. KML Files: To use kml files, use the following syntax:
  8. {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.

  9. 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:
  10. {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.

  11. Map Type: You can use the various map type as defined in Common Map Types.
  12. 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.

  13. 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.
  14. 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.

  15. Travel Modes. To insert a Google Map with walking directions (as oppose to driving), use the following syntax:
  16. {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.

  17. 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:
  18. {googleDir map_on_right=1
    from="1600 Amphitheatre Parkway, Mountain View CA 94043" 
    to="701 First Avenue, Sunnyvale, CA 94089"}
    
    [Live Demo]

  19. 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:
  20. {googleDir vertical=1
    from="1600 Amphitheatre Parkway, Mountain View CA 94043" 
    to="701 First Avenue, Sunnyvale, CA 94089"}
    
    [Live Demo]

  21. Hide Directions (Display Map Only). If you wish to hide the text description on the right of the map, use the following syntax:
  22. {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) .

  23. Units for Distance. To display the distance as miles, use the following syntax:
  24. {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]

Multiple Destinations

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

Google Maps directions with multiple destinations

Download

For Joomla 1.0, please make sure you have installed googleMaps plugin v1.0.30 for this plugin to work.
For Joomla 1.5 and above, the installation package will also install the latest version of googleMaps plugin required for this plugin.

Note: if you're using both the googleMaps and googleDirections plugins, you have to enter the Google Maps API Key for both the plugins (in the Plugin Manager).

Remove the "Powered by" links

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.

Purchase the "Powered-by" Removal License:

$10.00

Version History

  1. v1.0.20 (for Joomla 1.0), v1.5.20 (for Joomla 1.5), v1.6.20 (for Joomla 1.6), v1.7.20 (for Joomla 1.7), v2.5.20 (for Joomla 2.5), v3.0.20 (for Joomla 3.0 and above)
    Released Jul 20, 2017
  2. Display warning message when Google returned zero results for directions. This could happen when Google cannot decode the address, or Google cannot find a valid route from Point A to Point B.

  3. v1.0.19 (for Joomla 1.0), v1.5.19 (for Joomla 1.5), v1.6.19 (for Joomla 1.6), v1.7.19 (for Joomla 1.7), v2.5.19 (for Joomla 2.5), v3.0.19 (for Joomla 3.0 and above)
    Released Jul 20, 2017
    • Support for responsive design!
    • For larger screen, the map and the direction will be placed side by side - map on the left, directions on the right
    • For smaller screen (e.g. mobile), the map will be displayed on the top and the directions below the map
    • For iPad and iPhone 6/7 Plus, the landscape mode will show the map and directions side by side, and the portrait mode will show the map on top and directions below.

  4. v1.0.16 (for Joomla 1.0), v1.5.16 (for Joomla 1.5), v1.6.16 (for Joomla 1.6), v1.7.16 (for Joomla 1.7), v2.5.16 (for Joomla 2.5), v3.0.16 (for Joomla 3.0 and above)
    Released Apr 20, 2017
    • Support for secured websites (https)
    • Support for PHP7
    • Support for different transportation mode - DRIVING / BICYCLING / TRANSIT / WALKING

  5. v3.0.15 (for Joomla 3.0 and above)
    Released Nov 16, 2016
  6. As of June 22, 2016, Google now requires everyone to have an API key in order to display Google Maps on your website. Details here.

    If you do not have the Google Maps API key, you will receive the following error message: Google Maps API warning: NoApiKeys .

    This latest version added support for Google Maps API key. Please obtain an API key from Google and then enter the API key in the Plugin Manager.

    Note that if you're using both the googleMaps and googleDirections plugins, you have to enter the Google Maps API Key for both the googleMaps and googleDirections plugins (in the Plugin Manager).

  7. v3.0.14 (for Joomla 3.0 and above)
    Released Dec 20, 2014

    Support for the latest Joomla 3.3.6!

  8. 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 Feb 4, 2012
    • added support for Joomla 2.5
    • add flag w3c=1 => w3c compliant
    • support for IE7!
    • allow googleMaps to display in tabs
    • now allows address to include ' (apostrophe)
  9. 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
  10. Native version of the googleDirections plugin for Joomla 2.5!

  11. 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
  12. 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.

  13. 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
  14. New Features:

    • Support for multiple stopovers!
    • Support for vertical alignment
    • Added 3 more tags: stopover, vertical and map_full_width
    • Added unit: metric / imperial

  15. 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
  16. 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!

  17. v1.68 (for Joomla 1.6) and v1.78 (for Joomla 1.7)
    Released Oct 20, 2011
  18. 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.

  19. v1.08 (for Joomla 1.0) and v1.58 (for Joomla 1.5)
    Released Oct 1, 2009
  20. 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) .

  21. v1.07 (for Joomla 1.0) and v1.57 (for Joomla 1.5)
    Released Jun 1, 2009
  22. Added support for the plugin googleDirections - To Here - plugin

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

  24. v1.05 (for Joomla 1.0) and v1.55 (for Joomla 1.5)
    Released May 27, 2009
  25. uses googleMaps plugin for map display

  26. 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.
  27. v1.03 (for Joomla 1.0) and v1.53 (for Joomla 1.5)
    Released May 21, 2009
  28. Bug fix: when swapping the map and directions from left to right, the headings are now displayed correctly.

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

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

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

Comments   

+2 # dr3wski 2012-06-22 16:27
Is possible to add a print direction button/link?
Reply | Reply with quote | Quote
+2 # kksou 2012-06-24 17:15
Hi,

You can use the standard browser File Print. The latest googleMaps API v3 now renders correctly when using the browser's print function.

Regards,
/kksou
Reply | Reply with quote | Quote
0 # Mdev 2012-07-30 07:01
Install + paste code to an article = error 500
Uninstall = Failed loading XML file
Reply | Reply with quote | Quote
0 # remco 2012-09-05 14:44
hey is it posible that it wont open google maps website it self ?
Reply | Reply with quote | Quote
-3 # eventide 2013-01-09 03:38
I don't understand WHERE to put the map code - putting the code in the article text, including source view, just shows the code on the web page.

Also, which API key do I need to get - there are FIVE separate API services that can be enabled in the Google API Console.

Please clarify these things if you want your plug-in to be used more!
Reply | Reply with quote | Quote
-1 # kksou 2013-01-09 05:52
Hi,

You have asked similar question in the article "Google Maps directions using geographical coordinates (i.e. longitude and latitude)"

1) As described there, this is a Joomla plugin. As the name suggests, you use a plugin within a Joomla article. So you create a new article and place the code within the article.

2) Please do not use the source code view. Please simply enter the code in the default WYSISYG (what-you-see-is-what-you-get) mode.

3) Please also make sure that you have enabled the plugin. When you see the tag on your screen, it could mean the plugin is not enabled.

4) With the latest version which uses the Google Maps API v3, you DO NOT need to key in the API key.

Regards,
/kksou
Reply | Reply with quote | Quote
+3 # Johny R. 2013-04-10 06:56
I'm trying to trace a complex direction and after 8 stopovers (4 in the same avenue), the map stops to be displayed.

Is the any kind of limitation to trace directions?

I'm using Joomla 2.5 with googleDirection 2.5.7
Reply | Reply with quote | Quote
+1 # kksou 2013-04-10 08:32
Hi,

Please refer to the following google page in the heading "Usage Limits":
developers.google.com/.../...

"Individual requests for driving, walking or cycling directions may contain up to 8 intermediate waypoints in the request."

Regards,
/kksou
Reply | Reply with quote | Quote
+1 # Geert D. 2013-05-27 09:48
IS it availeble for JOOMLA 3.1

Thnks
Reply | Reply with quote | Quote
+1 # kksou 2013-05-27 22:46
Hi,

Have just emailed you.

Please let me know if you didn't receive it.

Regards,
/kksou
Reply | Reply with quote | Quote
0 # Milan 2013-07-05 01:37
Hi,

I've also Joomla 3.x installed. The Installation worked fine, but the frame isn't correctly sized (directions text goes over frame)

Is there also a Version for Joomla 3.x?
Milan
Reply | Reply with quote | Quote
-1 # kksou 2013-07-05 17:29
Hi Milan,

Have just emailed you the installer for googleDirections v3.0

Please give it a try and let me know if it works.

Regards,
/kksou
Reply | Reply with quote | Quote
+3 # marfim 2013-12-02 16:51
Hi kksou,
there is a procedure to install google dir on Joomla 3.2 ?

Regards
Reply | Reply with quote | Quote
0 # Killerwhale 2014-01-11 12:19
Can I use this plugin with Joomla 3.2 version?
Reply | Reply with quote | Quote
0 # HEDEN Juster 2014-07-10 03:34
Hi Kksou,

This plug-in Is it available for JOOMLA 3.3?

Best Regards
Reply | Reply with quote | Quote
+2 # christos 2017-09-03 21:49
I get the following error when I try to enter a location in the coming from field.

Google cannot decode your address:
Reply | Reply with quote | Quote
+1 # kksou 2017-09-04 02:03
Hi,

As the error message says, it literally means Google cannot decode your address.

Not sure which plugin your are using. If you are using googleMaps plugin, then please refer to the tutorial: googleMaps plugin Tutorial 01: Getting Started

Please try the address in the tutorial and see if any map appears. This will allow you to know if the map works on your machine.

If the plugin is working ok, you can try your own address again. If you are not in US, then don't forget to put in country name.

Please give the above a try and let me know if it works.

Warm Regards,
/kksou
Reply | Reply with quote | Quote

Add comment


Security code
Refresh