googleDirections plugin
Written by kksou   
Monday, 11 May 2009

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


Unique Features

  • 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!
Very Important: This plugin works only with PHP5 and higher. It does not work with PHP4 because PHP4 does not support OOP multiple inheritance.
Thanks to Chaminda and Marc for sharing and highlighting this.

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

Latest Version

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)

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 dir_width=275 from="1600 Amphitheatre Parkway, Mountain View CA 94043" to="701 First Avenue, Sunnyvale, CA 94089"}

MapDirections

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

MapDirections

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}

MapDirections

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


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.

History

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


Last Updated ( Wednesday, 13 May 2009 )
 

Comments  

 
# dr3wski 2012-06-22 16:27
Is possible to add a print direction button/link?
 
 
# 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
 
 
# Mdev 2012-07-30 07:01
Install + paste code to an article = error 500
Uninstall = Failed loading XML file
 
 
# remco 2012-09-05 14:44
hey is it posible that it wont open google maps website it self ?
 
 
# 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!
 
 
# 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
 
 
# 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
 
 
# 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
 
 
# Geert D. 2013-05-27 09:48
IS it availeble for JOOMLA 3.1

Thnks
 
 
# kksou 2013-05-27 22:46
Hi,

Have just emailed you.

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

Regards,
/kksou
 
 
# 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
 
 
# kksou 2013-07-05 17:29
Hi Milan,

Have just emailed you the installer for googleDirection s v3.0

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

Regards,
/kksou
 
 
# marfim 2013-12-02 16:51
Hi kksou,
there is a procedure to install google dir on Joomla 3.2 ?

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

This plug-in Is it available for JOOMLA 3.3?

Best Regards
 
< Prev   Next >

Blog - Forum - Privacy Policy - Contact Us
Copyright © 2006-2015. kksou.com. All Rights Reserved