thirdparty:googlemap
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:audio standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap
DESCRIPTION
ATTRIBUTES
center
height
id
saveState
scrollWheel
static
styles
width
zoom
apikey
EXAMPLES
Standard Usage
Populate markers from a Datasource with a Repeater
thirdparty:googlemapmarker

<thirdparty:googlemap> </...>

Embed a Google Map in the page, configured with a specific center location and zoom level. Add markers to the map using child <thirdparty:googlemapmarker> elements.

Content

<thirdparty:googlemapmarker>
Fixed locations to display on the map at all times.

Attributes

center
string
Center

Requires API Key

The location to initialize the map to. Google Maps recognises country, city, area and street names.
height
string
Height

Height of the map. No unit means pixels will be used, otherwise a percent sign can be included to use percentage values. Default = "100%".
id
string
(Required) Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
saveState
boolean
SaveState

If true, then the last location of the map will be restored when the user visits the page again.
scrollWheel
bool
Scroll Wheel

Requires API Key

If true, the user won't be able to interact with the map using the scroll wheel on their mouse. Deafult = false.
static
boolean
Static

Force the use of a Static Map. This allows the use of a reduced functionality Map without an API key.
styles
string
Styles

Requires API Key

Set custom map styles.
width
string
Width

Width of the map. No unit means pixels will be used, otherwise a percent sign can be included to use percentage values. Default = "100%".
zoom
int
Zoom

Zoom level to use on the map. Leaving blank will allow the
Map to set zoom automatically. Possible values range from 1 (zoomed out), to 22 (zoomed in).
Default = "" (auto).
apikey
string
API Key

A Google Maps API key is required for the following features: - Map Centering - More than One Map Marker

Get an API Key

Examples

Standard Usage

Maps can be used without an API Key if you have only a single marker.

HTML:

<thirdparty:googlemap> <thirdparty:googlemapmarker address="Brisbane"></thirdparty:googlemapmarker> </thirdparty:googlemap>

Populate markers from a Datasource with a Repeater

You can create multiple markers easily using a Data Repeater. This example assumes $arrMarkerAddresses is an array filled with address data.

HTML:

<thirdparty:googlemap apikey="YOUR_API_KEY"> <data:repeater datasource="$arrMarkerAddresses" as="address"> <thirdparty:googlemapmarker address="[? $address ?]"></thirdparty:googlemapmarker> </data:repeater> </thirdparty:googlemap>