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 6K of codes.

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

The Google Maps require you to input the geographic coordinates (i.e. the latitude and longitude) of your address.

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

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}

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 geographical coordinates (i.e. latitude and longitude), use the following syntax:

{googleMaps lat=37.4219720 long=-122.0841430}



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

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

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

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

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

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



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 control=GLargeMapControl3D 
maptype=G_SATELLITE_MAP} 

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.

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}

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

11. Only the lat and long are compulsory. The rest of the parameters are optional.

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?

You may not edit or remove any copyright or Powered by statements in the googleMaps plugin.

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

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

Improved optimized code to display google maps.

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

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

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

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

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

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

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

User reviews   Average user ratings:    3.5   (from 4 users)

1. Brett Salemink
   May 29, 2009 10:47am
   Goggle Maps
   

   Fantastic App. I have installed all kinds of plugins for Joomla and normally have some kind of problem. Yours worked great and the instructions were very easy to understand. Once again fantastic job.

2. rs
   June 21, 2009 10:22pm
   Does not work with google currency converter
   

   when i use this google map api with currency converter on the same web page
   then,
   google map is not displayed, only a dot is displayed.
   On clicking this dot then the map is displayed on new page.
   Please help

3. Fernando Falcon
   December 16, 2009 8:00pm
   Almost Perfect
   

   I was trying the plug in and found that when you list articles that are using the code within the brackets {googleMaps lat=45 long=-105}, you only see the first article with the map. If you know how to solve this, will be great.
   Sorry for my very very poor English. Warm Regards

4. Testa
   December 28, 2009 12:08am
   Doesn't work with Google Currency Converter Modul
   

   Great plugin, very useful.
   Unfortunately it doesn't display the map if it's used with Google Currency Converter Module

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