<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: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
ATTRIBUTES
EXAMPLES
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

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>