googleMaps plugin Tutorial 01: Getting Started

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.

Tutorials for the googleMaps plugin

Tutorials for the googleDirections plugin

Tutorials for the googleDirections_to_here plugin

Comments   

0 # 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?
Reply | Reply with quote | Quote
0 # 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 joomla.org 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].

Regards,
/kksou
Reply | Reply with quote | Quote
0 # Gerardo Sanchez 2012-03-14 19:44
Thanks, it worked very well.

regards
Reply | Reply with quote | Quote
0 # Eric L 2012-03-16 04:23
Hi,

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
Reply | Reply with quote | Quote
0 # kksou 2012-03-16 09:06
Hi,

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.

Regards,
/kksou
Reply | Reply with quote | Quote
0 # 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
Reply | Reply with quote | Quote
0 # kksou 2012-03-17 06:45
Hi,

Have just emailed you the Joomla 1.0 version.

Regards,
/kksou
Reply | Reply with quote | Quote
+1 # Eric L 2012-03-17 10:50
whao.
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.dormirenvalleedechevreuse.com/image s/stories/file/kml/DormirenVC.kml control=GLargeMapControl3D|GMapTypeControl lang=fr}
)
Did I made something wrong ??

thaks again
Reply | Reply with quote | Quote
0 # kksou 2012-03-17 19:42
Hi,

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?

Regards,
/kksou
Reply | Reply with quote | Quote
0 # 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 ;-)
Reply | Reply with quote | Quote
0 # Eric L 2012-03-19 02:44
Ok.

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
Reply | Reply with quote | Quote
0 # kksou 2012-03-19 06:27
Hi,

As noted in "How to Use" #6
http://www.kksou.com/php-gtk2/Joomla-Gadgets/googleMaps-plugin.php#how_to_use

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.

Regards,
/kksou
Reply | Reply with quote | Quote
0 # 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)
Reply | Reply with quote | Quote
0 # kksou 2012-03-19 06:45
Hi,

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 (http://maps.google.com/), 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 joomla.org. 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 joomla.org that may process your KML files automatically.

Regards,
/kksou
Reply | Reply with quote | Quote
0 # Eric L 2012-03-19 06:47
but... It was working fine until the last zip you sended :o
Reply | Reply with quote | Quote
-2 # Eric L 2012-03-19 06:49
If I reinstall this previous zip then the bubbles comes right. (with no zoom support)
Reply | Reply with quote | Quote
0 # 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 ?
Reply | Reply with quote | Quote
+1 # Eric L 2012-03-21 11:19
hi again did you receive my last email (reply) 2 days ago ?
Reply | Reply with quote | Quote
-1 # kksou 2012-03-21 17:34
Hi,

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

Would you mind resend the email again?

Regards,
/kksou
Reply | Reply with quote | Quote
-1 # 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:
http://www.dormirenvalleedechevreuse.com/CAT1/Carte-des-hebergements.html

{googleMaps width=620 height=330 lat=48.698028564453 long=1.916768312454 marker=0 label="Hébergements~Dormir en Vallée de Chevreuse~Les limites du parc sont matérialisées." zoom=11 addp=1 kml=http://www.dormirenvalleedechevreuse.com/image s/stories/file/kml/DormirenVC01.kml 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.

Regards
Reply | Reply with quote | Quote
-1 # 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.

Regards,
/kksou
Reply | Reply with quote | Quote
-1 # Eric L 2012-03-22 11:47
Absolutely perfect! :lol:


thank again for your rare concern.
Really, I mean it ;° )
Reply | Reply with quote | Quote
0 # livingdead 2012-05-29 00:34
Hi,

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.

Regards

Livingdead
Reply | Reply with quote | Quote
0 # Hozefa Saleh 2012-07-06 22:19
Hi,

I have downloaded Joomla 2.5.x: googleMaps_v2.5.19.zip from your site and installed it on my website mehsanainfo.com.

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 -> http://mehsanainfo.com/36-my-map

So please help me what would be the problem?

Thanks
Hozefa
Reply | Reply with quote | Quote
0 # Hozefa Saleh 2012-07-06 22:54
Ok,

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.

Thanks
Hozefa
Reply | Reply with quote | Quote
+1 # Gilles LG 2012-07-27 06:20
Hello,
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).
http://www.kz83rt94msri.com/index.php/calendar/detailed-list?view=event&id=15

But it does not work so far. Do you see a reason?
Thank you again!
Reply | Reply with quote | Quote
-1 # newbee 2013-01-06 09:22
Hi,

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

Thanks
newbee
Reply | Reply with quote | Quote
-1 # Olivia 2013-08-01 07:36
Very useful and easy to install and use. Congratulations! :lol:
Reply | Reply with quote | Quote
0 # Bill Egerton 2017-11-15 00:00
Trying to find a replacement for Mike Reumer's Google Maps plugin which I have used with great success but is not supported now. Yours looks the best alternative although I shall have to merge KML files where I did use multiple KML's in the same map, and more significant will have to find ways around not having KML sidebars. Got my first map displayed very quickly, but having an annoying problem. My KML files have Placemarks whose description consists of a clickable thumbnail image linked to an anchor point further down the page. With Mike Reumer's plugin, the link to the anchor point stayed in the same browser tab, as though target="_self" had been specified. With your plugin, a new tab is opened for the link, which is not what I want. I have tried adding target="_self" and also target="_parent" to the link, but without success. Does anyone have any thoughts?
Reply | Reply with quote | Quote
-1 # kksou 2018-01-03 03:22
Hi Bill,

Happy New Year! Sincerely apologize for the late reply. Was on a long leave with little access to the Internet

If you still have Mike Reumer's Google Maps plugin running somewhere on your local machine, can you do a view source and try to do a compare to see where are the differences?

I can help you change my code, but I'm not sure what to change. So you have to do that digging part and let me know which part to change.

Warm Regards,
/kksou
Reply | Reply with quote | Quote
0 # Kingsley 2018-01-26 18:20
Hi,
An amazing plugin you have, i would like to inquire if it is possible to get user address and also destination address to be displayed. i am using chronoforms to get users information on a "MOVING" site i am working on. i want the routes displayed automatically but not to a designated or predefined address.

Thank you
Reply | Reply with quote | Quote
0 # kksou 2018-02-02 05:27
Hi Kingsley,

1) If the "From" and "To" are both fixed, you can use the other plugin I've written:
googleDirections plugin


2) If the "To" is fixed and "From" is input from user, then you can use the other plugin I've written:
googleDirections - To Here - plugin


3) If both "From" and "To" are variable, then you have to customize the code or look for some other plugins.

Warm Regards,
/kksou
Reply | Reply with quote | Quote

Add comment


Security code
Refresh