Click Here


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