googleMaps plugin

download button
faq button

This plugin allows you to include one or more google maps right inside your content item or article.

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

If you need to display just a simple map showing the address of your company, this is the plugin.

Unique Features

  • Uses the latest Google Maps API v3
  • You can embed multiple Google Maps within an article
  • Each Google Map can be of different size, zoom level, map control and map type
  • Support for kml files
  • With built-in geocoder! i.e. you can specify using standard address instead of longitude and latitude
  • Built-in street view!
  • 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: See User Review

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

Latest Version

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

Support for the latest Joomla 3.3.6!

Geocoding your address

If you need to know the latitude and longitude of your address, you can find out here: Free Geocoder v2.0 by kksou.

googleMaps module

This plugin is for including Google Maps inside your article.

If you wish to place Google Maps in a module position, please use the googleMaps module.

googleDirections plugin

This plugin is for including Google Maps inside your article.

If you want to display Google Maps + driving/walking directions, use the googleDirections plugin.

Live Demo

Below you can see a live demo of the plugin. Note that:

  • You can embed more than one Google Maps within an article.
  • Each Google Map can be of different size and zoom level.

Google Inc.
1600 Amphitheatre Parkway
Mountain View, CA 94043
Phone: +1 650-253-0000
Fax: +1 650-253-0001
(zoom level = 15)


Yahoo! Inc.
701 First Avenue
Sunnyvale, CA 94089
Tel: (408) 349-3300
Fax: (408) 349-3301
(zoom level = 14)
control = GSmallZoomControl3D
maptype = G_NORMAL_MAP

Yahoo! Inc.
701 First Avenue
Sunnyvale, CA 94089
Tel: (408) 349-3300
Fax: (408) 349-3301
(zoom level = 14)
control = GLargeMapControl3D
maptype = G_SATELLITE_MAP

Amazon.com, Inc.
1200 12th Avenue South, Suite 1200
Seattle, Washington 98144-2734
Tel: (206) 266-1000
(zoom level = 12)
control = GSmallMapControl
maptype = G_NORMAL_MAP

Amazon.com, Inc.
1200 12th Avenue South, Suite 1200
Seattle, Washington 98144-2734
Tel: (206) 266-1000
(zoom level = 12)
control = GMapTypeControl
maptype = G_HYBRID_MAP

Demo - using KML Files

Yes, you can also use kml files directly with the plugin.

The following sample shows the blue, red and green polygons superimposed on the Google Maps.

The above sample code is produced by using the following syntax:

{googleMaps lat=53.763325 long=-2.579041 zoom=8 width=100% height=480 
kml=http://www.kksou.com/gmap/test/KML_Samples12.kml}

How to use

Tutorials

  1. To insert a Google Map with geographical coordinates (i.e. latitude and longitude), use the following syntax:
  2. {googleMaps lat=37.4219720 long=-122.0841430}
    
    [Live Demo]


  3. To insert a Google Map using address, use the following syntax.
    • Please enclose the address in double quotes, not single quote.
    • Please specify the full address, including the country name if the address is not in US.
    • Click here for full list of supported countries
    {googleMaps addr="1600 Amphitheatre Parkway, Mountain View CA 94043"}
    
    [Live Demo]

  4. You can add a label to be displayed when the user clicks on the red marker. Please make sure you enclose the label in double quotes. For new lines, please use ~.
  5. {googleMaps lat=37.4219720 long=-122.0841430 label="Google Inc.~
    1600 Amphitheatre Parkway.~Mountain View, CA 94043"}
    [Live Demo]

  6. To specify the width and height of the map, use the following syntax:
  7. {googleMaps lat=37.4219720 long=-122.0841430 label="Google Inc.~
    1600 Amphitheatre Parkway.<br />Mountain View, CA 94043" width=480 height=360}
    [Live Demo]

  8. To specify the zoom level of the map, use the following syntax:
  9. {googleMaps lat=37.4219720 long=-122.0841430 label="Google Inc.~
    1600 Amphitheatre Parkway.~Mountain View, CA 94043" width=480 height=360 zoom=12}
    [Live Demo]

  10. KML Files: To use kml files, use the following syntax:
  11. {googleMaps lat=53.763325 long=-2.579041 zoom=8 width=480 height=480 
    kml=http://www.kksou.com/gmap/test/KML_Samples12.kml}

    Note that you still need to specify the latitude and longitude of the center of the map.

    [Live Demo]

  12. Hiding the Red Marker: By default, a red marker will appear at the point where you specify the center of the map. If you are displaying all markers within your KML files, you can hide the red marker by using the parameter marker=0.
  13. [Live Demo]

  14. 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:
  15. {googleMaps lat=37.4219720 long=-122.0841430 control=GLargeMapControl3D}
    

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

    {googleMaps lat=37.4219720 long=-122.0841430 
    control=GLargeMapControl3D|GMapTypeControl}
    

    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.

  16. Map Type: You can use the various map type as defined in Common Map Types.
  17. For example, to display a Google Earth satellite image, use the following syntax:

    {googleMaps lat=37.4219720 long=-122.0841430 maptype=SATELLITE} 
    
    [Live Demo]

    Other common map types are as follows:

    • ROADMAP displays the default road map view
    • SATELLITE displays Google Earth satellite images
    • HYBRID displays a mixture of normal and satellite views
    • TERRAIN displays a physical map based on terrain information

    For complete list, please refer to Common Map Types.

  18. 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.
  19. 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}
    
    [Live Demo]

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

  20. Overview Map. By default, an overview map will be added to the bottom right corner of the map. To turn it off use addoverview=0.

  21. Google Bar. By default, a Google Bar will be displayed that provides local search capabilities within Maps API applications, allowing users to search locations for local listings. For example, the user can search for restaurants or the nearest bookstores around the place. To turn it off use addgoogle=0.

  22. Map Scale. To add a a control that displays the map scale, use addscale=1.

Making the plugin W3C XHTML 1.0 Transitional

To make the your page containing the googleMaps plugin W3C XHTML 1.0 Transitional, here are the steps:

  1. Install googleMaps plugin v1.5.11 and above.
  2. Run your page through the HTML validator. If it does not validate, please do step 3.
  3. In Joomla, the standard editor usually puts a pair of <p>...</p> around each paragraph. This will cause a problem because the following is not valid in XHTML 1.0 Transitional (you cannot have a <div> inside a <p> tag):
  4. <p>
    ...
    <div>
    ... HTML codes that inserts the google map
    </div>
    ...
    </p>
    

    To work around this, please add a add_p=1 in your googleMaps tags as shown below:

    {googleMaps lat=37.4219720 long=-122.0841430 label="Google Inc.~
    1600 Amphitheatre Parkway.
    Mountain View, CA 94043" width=480 height=360 add_p=1}

    What this does is that it adds another pair of </p>...<p> just outside the pair of <div>:

    <p>
    ...
    </p>
    <div>
    ... HTML codes that inserts the google map
    </div>
    <p>
    ...
    </p>
    

Advanced use of googleMaps plugin

  1. How to display multiple markers in Google Maps using KLM file?

  2. How to display multiple markers in different colors in Google Maps using KML file?

  3. How to place numbered markers in Google Maps using KML file?

Download


History

  1. v1.02 (for Joomla 1.0) and v1.52 (for Joomla 1.5)
    Released May 3, 2009
  2. Improved optimized code to display google maps.

  3. v1.03 (for Joomla 1.0) and v1.53 (for Joomla 1.5)
    Released May 10, 2009
  4. Added support for kml files.

    Please refer to here on how to use kml files.

  5. v1.04 (for Joomla 1.0) and v1.54 (for Joomla 1.5)
    Released May 11, 2009

  6. You can now specify the map control e.g. GLargeMapControl3D, GSmallZoomControl3D, GSmallMapControl, etc.

    You can now specify the map type e.g. G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP, etc.

    Please refer to the documentations on how to define the map control and map type.

  7. v1.05 (for Joomla 1.0) and v1.55 (for Joomla 1.5)
    Released May 12, 2009
    • Added language support e.g. lang=fr for French, lang=ja for Japanese, etc. Please refer to here for details.
    • You can now specify the width in percentage, e.g. width=81%, or width=100%.

  8. v1.06 (for Joomla 1.0) and v1.56 (for Joomla 1.5)
    Released May 14, 2009
  9. 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.

  10. v1.07 (for Joomla 1.0) and v1.57 (for Joomla 1.5)
    Released May 23, 2009
  11. Added GOverviewMapControl, GScaleControl and GoogleBar.

    • By default, an overview map will be added to the bottom right corner of the map. To turn it off use addoverview=0.
    • By default, a Google Bar will be displayed that provides local search capabilities within Maps API applications, allowing users to search locations for local listings. For example, the user can search for restaurants or the nearest bookstores around the place. To turn it off use addgoogle=0.
    • To add a a control that displays the map scale, use addscale=1
  12. v1.08 (for Joomla 1.0) and v1.58 (for Joomla 1.5)
    Released May 27, 2009
  13. You can now add multiple controls, e.g.GLargeMapControl3D|GMapTypeControl. Please refer to here for more details.

  14. v1.09 (for Joomla 1.0) and v1.59 (for Joomla 1.5)
    Released May 28, 2009
  15. The plugin now comes with a built-in geocoder! This means that you can now specify address directly, instead of using the longitude and latitude. Please refer to here for more details.

  16. v1.0.10 (for Joomla 1.0) and v1.5.10 (for Joomla 1.5)
    Released Jun 1, 2009
  17. Added support for the plugin googleDirections - To Here - plugin

  18. v1.0.11 (for Joomla 1.0) and v1.5.11 (for Joomla 1.5)
    Released October 11, 2009
  19. This is in response to Alessandro Agostini's post titled "googleMaps incompatibility XHTML 1.0 Strict".

    The googleMaps plugin is now W3C XHTML 1.0 Transitional.

    Please refer to here for complete description.

  20. v1.0.12 (for Joomla 1.0) and v1.5.12 (for Joomla 1.5)
    Released October 24, 2009
  21. This is in response to Chris's post titled "Re:googleDirections - To Here -- error".

    "$add_p undefined" has been fixed.

  22. v1.0.13 (for Joomla 1.0) and v1.5.13 (for Joomla 1.5)
    Released February 27, 2010
  23. This is in response to Andrew's post titled "Re:Undesirable lines of code".

    The 2 lines of warning messages "$add_p undefined" have been fixed.

  24. v1.6 (for Joomla 1.6)
    Released Feb 23, 2011
  25. Native version of the googleMaps plugin for Joomla 1.6!

  26. v1.7.14 (for Joomla 1.7)
    Released October 10, 2011
  27. Native version of the googleMaps plugin for Joomla 1.7!

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

  28. v1.0.15 (for Joomla 1.0), v1.5.15 (for Joomla 1.5), v1.6.15 (for Joomla 1.6), v1.7.15 (for Joomla 1.7)
    Released Nov 15, 2011
  29. 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!

  30. 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)
    Released Dec 24, 2011
  31. New features:

    • Support for googleDirections multiple stopovers!
    • If no label is specified, will use addr or latlng as marker
    • Improved function for displaying marker
    • kml can now show marker too
    • Allow user to input addr as "37.4219720, -122.0841430"

  32. v1.0.17 (for Joomla 1.0), v1.5.17 (for Joomla 1.5), v1.6.17 (for Joomla 1.6), v1.7.17 (for Joomla 1.7)
    Released Jan 03, 2012
  33. 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 googleMaps plugin now maps the exact location when latitude/longitude is given.

  34. v1.0.17 (for Joomla 1.0), v1.5.17 (for Joomla 1.5), v1.6.17 (for Joomla 1.6), v1.7.17 (for Joomla 1.7), v2.5.17 (for Joomla 2.5)
    Released Jan 26, 2012
  35. Native version of the googleMaps plugin for Joomla 2.5!

  36. v1.0.18 (for Joomla 1.0), v1.5.18 (for Joomla 1.5), v1.6.18 (for Joomla 1.6), v1.7.18 (for Joomla 1.7), v2.5.18 (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 allow address to include ' (apostrophe)
  37. 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)
    Released Mar 24, 2012
  38. Thanks to persistence and many rounds of testing by Eric L, the googleMaps plugin now supports zoom and multiple InfoWindows with KML files!

  39. 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)
    Released Apr 21, 2013
    • Support for Joomla 3.0!

    • Changed onload() to addEvent('load') so that it works with some Joomla templates that also use onload().