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

This is a super light-weight plugin using only about 10K 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

The Google API Key

The plugin makes use of the Google Maps API provided by Google. As such, please make sure you have the Google Maps API. If you don't have the key, you can sign up for free here.

Geocoding your address

The Google Maps require you to input the geographic coordinates (i.e. the latitude and longitude) of the center of the map (if you're using the kml file).

If you do not know the latitude and longitude of an address, you can them 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.

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

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

Demo 3: Driving Directions using map from KML file

• 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 with multiple destinations
• Google Maps directions using geographical coordinates (i.e. longitude and latitude)
• Google Maps directions for multiple destinations using geographical coordinates

1. Very Important!!! Before you can make use of the plugin, please enter the Google Map API Key in the Parameters page in the Plugin Manager.
2. 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"}

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

4. 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.
5. 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.

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

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

8. 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 French, use:

{googleMaps lat=37.4219720 long=-122.0841430 lang=fr}

To display the Goolge Maps control in Japanese, use:

{googleMaps lat=37.4219720 long=-122.0841430 lang=ja}

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

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

The default mode is driving.

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

The default mode is driving.

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

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

Google Maps directions with multiple destinations

• 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

User reviews   Average user ratings:    4.0   (from 1 user)

1. chinashwq
   November 04, 2009 8:26pm
   thanks
   

   good.thanks

Note: You have to be a registered member to leave a comment. Free registration here.