googleMaps plugin Tutorial 01: Getting Started
Written by kksou   
Monday, 26 December 2011

This is part 1 of a series of tutorial for the googleMaps plugin.

Using the googleMaps plugin is as easy as 1-2-3:

  1. Specify the address. This can be real address or in latitude/longitude.
  2. Specify the label. This is the label for the marker that indicates your designated address.
  3. Specify the width and height. This sets the size of your map.

Note that:

  • Only the address is mandatory. The other 2 are optional.
  • If you do not specify any label, it will use your address as label.
  • If you do not specify any width or height, it will use the defaults, which is width=640 and height=480. You can change these defaults via the Plugin Manager.

1. Specifying Address

You can display a Google Map by using your address or a latitude/longitude pair.

  • Make sure you 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 by Google
Using AddressUsing Latitude/Longitude
{googleMaps addr="1600 Amphitheatre Parkway,
Mountain View CA 94043"}
{googleMaps addr="37.4219720, -122.0841430"}

2. Specifying Label for the Marker

You can add a label to be displayed when the user clicks on the red marker.

  • Make sure you enclose the labelin double quotes, not single quote.
  • For new lines, please use ~.
Single Line LabelMultiple Lines Label
{googleMaps addr="1600 Amphitheatre Parkway,
Mountain View CA 94043" label="Google Inc."}
{googleMaps addr="37.4219720, -122.0841430"
label="Google Inc.~ 1600 Amphitheatre Parkway.
~Mountain View, CA 94043"

3. Specifying the width and height of the map

  1. To specify the width and height of the map, use the following syntax:
  2. {googleMaps width=480 height=360
    addr="1600 Amphitheatre Parkway, Mountain View CA 94043"}

  3. You can also specify width=100% to take up the entire width of the content area.
  4. {googleMaps width=100% height=360
    addr="1600 Amphitheatre Parkway, Mountain View CA 94043"}

  5. If you do not specify any width or height, it will use the defaults, which is width=640 and height=480. You can change these defaults via the Plugin Manager.

User Review

This plugin is listed in the The Joomla! Extensions Directory: See User Review

If you use the googleMaps plugin, please post a review at the Joomla! Extensions Directory

Tutorials for the googleMaps plugin

Tutorials for the googleDirections plugin

Tutorials for the googleDirections_to_here plugin



# Gerardo Sanchez 2012-03-14 16:34
Hi, the googleMaps plugin is really easy to to use, the issue is that i want the same as you have here: one map in each column, but i can not get it to do so, i always get one below the other, any ideas of how to do it?
# kksou 2012-03-14 19:40
Hi Gerardo,

If you do a view source, you can see that I use standard HTML tables to make the 2 maps side by side.

There are many plugins available in that allows you to add HTML codes in your article.

So pick one that you like, add a HTML table, then put the googleMaps tags within a pair of [td][/td].

# Gerardo Sanchez 2012-03-14 19:44
Thanks, it worked very well.

# Eric L 2012-03-16 04:23

I'm trying to use a kml file, because I need whatever number of placemark.

This is achieved, with a polygon too.
Everything would be great if the default zoom at initial page loading would be controlled.

The zoom = xx param is only working when using a simple call (with an address directly in the plugin call).
Using a kml file zoom is not functional, even manipulating you php to force this param to another default value.
I tried to add some with inside my kml that give **good result directly in G Earth**, but that is **absolutely not useful with the plugin**. :sad:

Can you help please ?
Thank you
# kksou 2012-03-16 09:06

Have modified the code so that zoom now works with kml file.

Have just emailed you the modified version.

Please give it a try and let me know if it works.

# Eric L 2012-03-17 02:01
That was really cool from you.
As I emailed, unfortunately this site on which I do a little maintenance is still an old Joomla 1.0.
May you post the corresponding zip ?

Thank you so much
# kksou 2012-03-17 06:45

Have just emailed you the Joomla 1.0 version.

# Eric L 2012-03-17 10:50
Really nice.

thank you.

I uninstalled the mambot.
The "for J 1.0" zip you sended to me is named the same (googleMaps_v1.0.18) and I've insatlled this new zip.

hmmm.. now the rendered article displays the plugin code but does not executes it.
( this:
{googleMaps width=620 height=360 zoom=12 kml=http://www.dormirenvalleed control=GLargeMapContro l3D|GMapTypeContr ol lang=fr}
Did I made something wrong ??

thaks again
# kksou 2012-03-17 19:42

This means that the plugin has not been processed.

1) Can you please install back googleMaps_v1.0.17 and see if it still works fine?

2) Can you please double check that the plugin is enabled?

# Eric L 2012-03-18 02:47
May be a cache issue; The plugin is actually running now.

BUT I 'm still unable to use the zoom parameter, it's always opening at the same level (wich I don't know but probably something auto calculated by google to display the whole polygon.
You can try to use my kml as you have its path now.

Thank again ;-)
# Eric L 2012-03-19 02:44

I see the plugin working only if I call it with a long/lat ..but why !?
This will cause a parasite point to appear, and wich is precisely not a good idea when using a kml.
Mostly because this unwanted point is not stylable (?) . At least can we assign a transparent icon to it ? It should not be shown.

Thank again
# kksou 2012-03-19 06:27

As noted in "How to Use" #6

When you use the KML option, the Google Maps API requires you to specify the latitude and longitude of the center of the map.

As for the marker, you can add the parameter "marker=0" to hide the marker.

# Eric L 2012-03-19 03:26
yes I confirm (I compared with the n-1 version)
The very last release, if it adds the zoom support, lost the kml point's bubbles (no more reaction at click and Description does not pops up)
# kksou 2012-03-19 06:45

If you do a view source, or take a look at the source code of the googleMaps plugin, you will find that when you use the googleMaps API, you have to manually add the event.addListener and display the InfoWindow for any point you want to display.

Unlike the Google Maps app (, the Google Maps API will only display the KML file. If you want to display a InfoWindow when you click on a point, you have to manually add the event.addListener for each point.

As mentioned in the page where you download the plugin, there are many other very powerful googlemaps plugins you can find in But I found them a bit too complicated to use. All I want is to display a simple map in my article.

That's the reason why I wrote this as a very light-weight plugin to allow users to easily embed a google map in an article.

For your case, you might be able to find some of those googlemaps plugins from that may process your KML files automatically.

# Eric L 2012-03-19 06:47
but... It was working fine until the last zip you sended :o
# Eric L 2012-03-19 06:49
If I reinstall this previous zip then the bubbles comes right. (with no zoom support)
# Eric L 2012-03-19 06:39
Didn't know the marker=0.
Thanks again

What about the new issue about lost of the bubbles ?
# Eric L 2012-03-21 11:19
hi again did you receive my last email (reply) 2 days ago ?
# kksou 2012-03-21 17:34

No, I'm still waiting for the email. Didn't receive anything from you.

Would you mind resend the email again?

# Eric L 2012-03-22 00:53
looks like MP are nor delivered (when I reply your direct email on kksou mp.... anti spam? )

here's the email I sended the 19th
here it is:
and the test page is still:

{googleMaps width=620 height=330 lat=48.698028564453 long=1.916768312454 marker=0 label="Hébergements~Do rmir en Vallée de Chevreuse~Les limites du parc sont matérialisées." zoom=11 addp=1 kml=http://www.dormirenvalleed control=GLargeMapContro l3D|GMapTypeContr ol lang=fr}

This make the bubbles comes up with the previous zip (I mean n-1) jsut before your very last post.

# kksou 2012-03-22 01:35
Thanks for the tags. That's what I need.

Let me do some testing on my end and will get back to you asap.

# Eric L 2012-03-22 11:47
Absolutely perfect! :lol:

thank again for your rare concern.
Really, I mean it ;° )
# livingdead 2012-05-29 00:34

Really big thank you for this usefull plugin.

I like to know how to configure the label display. I'll like to make it a little more visible, how can I specify a style for it.


# Hozefa Saleh 2012-07-06 22:19

I have downloaded Joomla 2.5.x: from your site and installed it on my website

I am using joomla 2.5.6 and added the google api key and enabled the plugin. But when I insert the code like you provided in your example I just get the code written on the webpage like here ->

So please help me what would be the problem?

# Hozefa Saleh 2012-07-06 22:54

I have findout the solution. Actually I am using seblod CCK to create the joomla articles, and your plugin doesn't support it. So I have open the article in normal joomla mode, removed the cck code and now its start working.

So I just want to let others know if they are using CCK like seblod be careful about this.

I would like to request the owner of the plugin to make it compatible with SEBLOD cck, as its a popular one and also make core joomla articles.

# Gilles LG 2012-07-27 06:20
First thank you for your work!

It seems I have an issue as I try to include your plugin into the text of a component (actually the component displays events, and ther eis a text window available. This is wher eI try to put the plugin).

But it does not work so far. Do you see a reason?
Thank you again!
# newbee 2013-01-06 09:22

I m pretty new to google map and Joomla. Just trying to get my hand dirty. I found your pluggin easy to use. However, just need some help in passing directions from forms.
Suppose, I have a form that captures the address in a text field. How could I use use the value of that field as "addr=".

# Olivia 2013-08-01 07:36
Very useful and easy to install and use. Congratulations ! :lol:
< Prev   Next >

Blog - Forum - Privacy Policy - Contact Us
Copyright © 2006-2015. All Rights Reserved