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:
- 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:
{googleMaps width=480 height=360
addr="1600 Amphitheatre Parkway, Mountain View CA 94043"}
- You can also specify width=100% to take up the entire width of the content area.
{googleMaps width=100% height=360
addr="1600 Amphitheatre Parkway, Mountain View CA 94043"}
- 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
|
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.dormirenvalleed echevreuse.com/images/stories/file/kml/DormirenVC.kml control=GLargeMapContro l3D|GMapTypeContr ol 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.dormirenvalleed echevreuse.com/CAT1/Carte-des-hebergements.html
{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 echevreuse.com/images/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
RSS feed for comments to this post