This is part 1 of a series of tutorial for the googleMaps plugin.
Using the googleMaps plugin is as easy as 1-2-3:
- Specify the address. This can be real address or in latitude/longitude.
- Specify the label. This is the label for the marker that indicates your designated address.
- 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 Address | Using 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 Label | Multiple 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
- To specify the width and height of the map, use the following syntax:
- You can also specify width=100% to take up the entire width of the content area.
- 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.
{googleMaps width=480 height=360
addr="1600 Amphitheatre Parkway, Mountain View CA 94043"}
{googleMaps width=100% height=360
addr="1600 Amphitheatre Parkway, Mountain View CA 94043"}
Tutorials for the googleMaps plugin
- googleMaps plugin Tutorial 01: Getting Started
- googleMaps plugin Tutorial 02: Zoom Level
- googleMaps plugin Tutorial 03: Language
- googleMaps plugin Tutorial 04: Map Type
- googleMaps plugin Tutorial 05: KML Files
Tutorials for the googleDirections plugin
- googleDirections plugin Tutorial 01: Getting Started
- googleDirections plugin Tutorial 02: Specifying Stopover Points
- googleDirections plugin Tutorial 03: Travel Modes
- googleDirections plugin Tutorial 04: Unit Systems - miles or km
- googleDirections plugin Tutorial 05: Display Directions on the Left
- googleDirections plugin Tutorial 06: Display Directions below the Map
- googleDirections plugin Tutorial 07: Display Directions in your Local Language
- googleDirections plugin Tutorial 08: Specifying Stopover Points
Tutorials for the googleDirections_to_here plugin
- googleDirections - To Here - plugin Tutorial 01: Getting Started
- googleDirections - To Here - plugin Tutorial 02: Adding Label to Home Address
- googleDirections - To Here - plugin Tutorial 03: Travel Modes
- googleDirections - To Here - plugin Tutorial 04: Unit Systems - miles or km
- googleDirections - To Here - plugin Tutorial 05: Display Directions on the Left
- googleDirections - To Here - plugin Tutorial 06: Display Directions below the Map
- googleDirections - To Here - plugin Tutorial 07: Display Directions in your Local Language
- googleDirections - To Here - plugin Tutorial 08: Specifying Stopover Points
Comments
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
regards
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**.
Can you help please ?
Thank you
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
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
Have just emailed you the Joomla 1.0 version.
Regards,
/kksou
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
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
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
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
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
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)
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
Thanks again
What about the new issue about lost of the bubbles ?
No, I'm still waiting for the email. Didn't receive anything from you.
Would you mind resend the email again?
Regards,
/kksou
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
Let me do some testing on my end and will get back to you asap.
Regards,
/kksou
thank again for your rare concern.
Really, I mean it ;° )
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
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
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
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!
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
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
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
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
RSS feed for comments to this post