• RSS 0.91
  • RSS 1.0
  • RSS 2.0
  • ATOM 0.3
  • OPML

Insert Google Map

TOC

 the task 

If you never heard of it or just want to learn more about it... don't hesitate to find out all you need about Google Maps.
There you will also be able to generate a key which is required to use Google Maps on your own homepage. Google Maps is not the first and not the best map, but it is quite good taking the fact that it only requires a web browser and JavaScript.
To make it easier for you to use it on your very own Joomla/Mambo homepage, the google:map Mambot/Moslate was added to the media_export (where you can also see the full list of parameters).
If you are looking for a demonstration, see where I am from.

 google:map 

1) Import the mambo_export (you need to have com_moslate installed first)
2) Edit a content-item (assuming default configuration)
and write:
  1. {moslate} {google:map key="---the key you got from google---"/} {/moslate}

The result should be your very own Google Map. Important is that the key is valid for a certain path only, which includes the host and the folder. If you are using SEF, you may need to sign up for a new key.

 multiple maps 

Nothing is easier than inserting multiple maps on the same page... just write the same code multiple times within the same content item. For example like this:
  1. {moslate} {google:map key="---the key you got from google---"/} {/moslate}
  2. {moslate} {google:map key="---the key you got from google---"/} {/moslate}

Or this:
  1. {moslate} {google:map key="---the key you got from google---"/}
  2.  {google:map key="---the key you got from google---"/} {/moslate}

 customize 

google:map has several parameters to customize it...

 id 

By default the id for the first Google Map is "map", for the second Google Map it is "map2" and so on. This id applies to the DIV-element which is used and a global JavaScript variable. If you want to choose another id, just use this parameter.

 width and height 

The default size is 500x400. The width and/or height is added as a style attribute for the DIV-element. If you set both to empty no style attribute will be added and you are free to control the size using your template.

 controls 

Currently there are two controls available: "smallmap" and "maptype". By default both will be added. Using the controls parameter you could let it add none or one of them only.

 javascript-link 

The first map will insert a reference to a required script (provided by Google). If you already did this by yourself (for example within your template) then you may set this parameter to "false".

 onload 

By default google:map will center the map to longitude=-122.1419, latidude=37.4419 using zoom level 13. This will be the following JavaScript code for version 1:
  1. map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
and the following Javascript code for version 2:
  1. map.setCenter(new GLatLng(37.4419, -122.1419), 13);
If you want to execute some other JavaScript code you may use the onload parameter. You could also just make a function call to a function defined in another JavaScript block. The local map variable will reference the current map (even though the global variable may be "map2"). For more details on the Google Map API please consult the documentation.

 example usage 

The following usage will show Germany with the "smallmap" control only:
  1. {moslate}
  2. {google:map key="..." longitude="12.0" latitude="51.4419" zoom="12" controls="smallmap"/}
  3. {/moslate}