googleMaps plugin

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

If you need to display just a simple map showing the address of your company, this is the 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.

• 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: googleMaps by kksou

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

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

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.

This plugin is for including Google Maps inside your article.

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

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.

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

{googleMaps lat=37.4163228 long=-122.0250403 label="Yahoo! Inc.~701 First Avenue~Sunnyvale, CA 94089" width=300 height=300 zoom=14}

{googleMaps lat=37.4163228 long=-122.0250403 label="Yahoo! Inc.~701 First Avenue~Sunnyvale, CA 94089" width=300 height=300 zoom=14 control=GLargeMapControl3D maptype=G_SATELLITE_MAP}

{googleMaps lat=47.5923005 long=-122.3172946 zoom=12 label="Amazon.com, Inc.~1200 12th Avenue South, Suite 1200~Seattle, Washington 98144-2734" width=300 height=300 control=GSmallMapControl maptype=G_NORMAL_MAP}

{googleMaps lat=47.5923005 long=-122.3172946 zoom=12 label="Amazon.com, Inc.~1200 12th Avenue South, Suite 1200~Seattle, Washington 98144-2734" width=300 height=300 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/php-gtk2/gmap/test/KML_Samples12.kml}

1. To insert a Google Map with geographical coordinates (i.e. latitude and longitude), use the following syntax:

{googleMaps lat=37.4219720 long=-122.0841430}

[Live Demo]
2. 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]
3. 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 ~.

{googleMaps lat=37.4219720 long=-122.0841430 label="Google Inc.~
1600 Amphitheatre Parkway.~Mountain View, CA 94043"}

[Live Demo]
4. To specify the width and height of the map, use the following syntax:

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

[Live Demo]
5. To specify the zoom level of the map, use the following syntax:

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

{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]
7. 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.
[Live Demo]
8. 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:

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

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

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

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

[Live Demo]

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

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

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

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

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

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

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?

1. v3.0.30 (for Joomla 3.0 and above)
   Released Jul 20, 2017
• Added support for responsive design for googleDirections and googleDirections_tohere
• Added support for PHP 7
2. v3.0.28 (for Joomla 3.0 and above)
   Released Jul 8, 2017
• Added support for Joomla Update System
• Tested to work with Joomla 3.7.3
3. v1.0.26 (for Joomla 1.0), v1.5.26 (for Joomla 1.5), v1.6.26 (for Joomla 1.6), v1.7.26 (for Joomla 1.7), v2.5.26 (for Joomla 2.5), v3.0.26 (for Joomla 3.0 and above)
   Released Apr 20, 2017
• Support for secured websites (https)
• Support for PHP7
4. v3.0.25 (for Joomla 3.0 and above)
   Released Nov 16, 2016

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.

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

Support for the latest Joomla 3.3.6!

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

Thanks to persistence and many rounds of testing by Eric L, the googleMaps plugin now supports zoom and multiple InfoWindows with KML files!

8. 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)
9. 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

Native version of the googleMaps plugin for Joomla 2.5!

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

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.

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

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

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!
13. v1.7.14 (for Joomla 1.7)
    Released October 10, 2011

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.

14. v1.6 (for Joomla 1.6)
    Released Feb 23, 2011

Native version of the googleMaps plugin for Joomla 1.6!

15. v1.0.13 (for Joomla 1.0) and v1.5.13 (for Joomla 1.5)
    Released February 27, 2010

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.

16. v1.0.12 (for Joomla 1.0) and v1.5.12 (for Joomla 1.5)
    Released October 24, 2009

This is in response to Chris's post titled "Re:googleDirections - To Here -- error".

"$add_p undefined" has been fixed.

17. v1.0.11 (for Joomla 1.0) and v1.5.11 (for Joomla 1.5)
    Released October 11, 2009
    

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.

18. v1.0.10 (for Joomla 1.0) and v1.5.10 (for Joomla 1.5)
    Released Jun 1, 2009
    

Added support for the plugin googleDirections - To Here - plugin

19. v1.09 (for Joomla 1.0) and v1.59 (for Joomla 1.5)
    Released May 28, 2009

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.

20. v1.08 (for Joomla 1.0) and v1.58 (for Joomla 1.5)
    Released May 27, 2009

You can now add multiple controls, e.g.GLargeMapControl3D|GMapTypeControl. Please refer to here for more details.

21. v1.07 (for Joomla 1.0) and v1.57 (for Joomla 1.5)
    Released May 23, 2009

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
22. v1.06 (for Joomla 1.0) and v1.56 (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.

23. 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%.
24. v1.04 (for Joomla 1.0) and v1.54 (for Joomla 1.5)
    Released May 11, 2009

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.

25. v1.03 (for Joomla 1.0) and v1.53 (for Joomla 1.5)
    Released May 10, 2009

Added support for kml files.

Please refer to here on how to use kml files.

26. v1.02 (for Joomla 1.0) and v1.52 (for Joomla 1.5)
    Released May 3, 2009

Improved optimized code to display google maps.