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}
- 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
How to use
Tutorials
- googleDirections plugin Tutorial 01: Getting Started
- googleDirections plugin Tutorial 02: Specifying Stopover Points
- googleDirections plugin Tutorial 03: Travel Modes
- googleDirections plugin Tutorial 04: Unit Systems - miles or km
- googleDirections plugin Tutorial 05: Display Directions on the Left
- googleDirections plugin Tutorial 06: Display Directions below the Map
- googleDirections plugin Tutorial 07: Display Directions in your Local Language
- googleDirections plugin Tutorial 08: Specifying Stopover Points
- Specify the Start and End Points. To insert a Google Map with directions, use the following syntax:
- Enclose from and to in double quotes (")
- Enter the full address in one line. If you're not in US, specify your country too.
- 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.
- 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]
- KML Files: To use kml files, use the following syntax:
- 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:
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 scaleGMapTypeControl
- 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- Map Type: You can use the various map type as defined in Common Map Types.
G_NORMAL_MAP
displays the default road map viewG_SATELLITE_MAP
displays Google Earth satellite imagesG_HYBRID_MAP
displays a mixture of normal and satellite viewsG_DEFAULT_MAP_TYPES
contains an array of the above three types, useful for iterative processing.- 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. - Travel Modes. To insert a Google Map with walking directions (as oppose to driving), use the following syntax:
- 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:
- 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:
- Hide Directions (Display Map Only). If you wish to hide the text description on the right of the map, use the following syntax:
- Units for Distance. To display the distance as miles, use the following syntax:
{googleDir from="1600 Amphitheatre Parkway, Mountain View CA 94043" to="701 First Avenue, Sunnyvale, CA 94089"}[Live Demo]
Note that:
{googleDir width=480 height=360 from="1600 Amphitheatre Parkway, Mountain View CA 94043" to="701 First Avenue, Sunnyvale, CA 94089"}[Live Demo]
{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.
{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:
For complete list, please refer to Goolge Maps Controls Overview.
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:
For complete list, please refer to Common Map Types.
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.
{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.
{googleDir map_on_right=1
from="1600 Amphitheatre Parkway, Mountain View CA 94043"
to="701 First Avenue, Sunnyvale, CA 94089"}
[Live Demo]
{googleDir vertical=1
from="1600 Amphitheatre Parkway, Mountain View CA 94043"
to="701 First Avenue, Sunnyvale, CA 94089"}
[Live Demo]
{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) .
{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.
Joomla 1.5.x: googleDirections_v1.5.20_package.zip
Joomla 1.6.x: googleDirections_v1.6.20_package.zip
Joomla 1.7.x: googleDirections_v1.7.20_package.zip
Joomla 2.5.x: googleDirections_v2.5.20_package.zip
Joomla 3.0.x: googleDirections_v3.0.20_package.zip
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
- 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 - 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.
- 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
- v3.0.15 (for Joomla 3.0 and above)
Released Nov 16, 2016 - v3.0.14 (for Joomla 3.0 and above)
Released Dec 20, 2014Support for the latest Joomla 3.3.6!
- 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)
- 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 - 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 - 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 - Support for multiple stopovers!
- Support for vertical alignment
- Added 3 more tags: stopover, vertical and map_full_width
- Added unit: metric / imperial
- 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 - 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.68 (for Joomla 1.6) and v1.78 (for Joomla 1.7)
Released Oct 20, 2011 - v1.08 (for Joomla 1.0) and v1.58 (for Joomla 1.5)
Released Oct 1, 2009 - v1.07 (for Joomla 1.0) and v1.57 (for Joomla 1.5)
Released Jun 1, 2009 - 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
- v1.05 (for Joomla 1.0) and v1.55 (for Joomla 1.5)
Released May 27, 2009 - 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.03 (for Joomla 1.0) and v1.53 (for Joomla 1.5)
Released May 21, 2009 v1.02 (for Joomla 1.0) and v1.52 (for Joomla 1.5)
Released May 14, 2009- v1.0 (for Joomla 1.0) and v1.5 (for Joomla 1.5)
Released May 11, 2009
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.
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).
Native version of the googleDirections plugin for Joomla 2.5!
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.
New Features:
Now uses Google Maps API v3!
Key advantages in Google Maps API v3 includes:
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.
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) .
Added support for the plugin googleDirections - To Here - plugin
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.
uses googleMaps plugin for map display
Bug fix: when swapping the map and directions from left to right, the headings are now displayed correctly.
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.
Comments
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
Uninstall = Failed loading XML file
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!
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
Is the any kind of limitation to trace directions?
I'm using Joomla 2.5 with googleDirection 2.5.7
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
Thnks
Have just emailed you.
Please let me know if you didn't receive it.
Regards,
/kksou
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
Have just emailed you the installer for googleDirections v3.0
Please give it a try and let me know if it works.
Regards,
/kksou
there is a procedure to install google dir on Joomla 3.2 ?
Regards
This plug-in Is it available for JOOMLA 3.3?
Best Regards
Google cannot decode your address:
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
RSS feed for comments to this post