Google Maps


The fastest way to add a simple one pin Google Map to a page, is to use the Oncord visual page editor.

To do this, simply edit a web page, click "Insert" in the left panel, and locate the Google Map element. Drag-and-drop the map into position, and configure it's attributes in the left panel.

Google Map UI Controls

Two Oncord UI Controls are combined to show a Google Map:

<thirdparty:googlemap> 
Embeds a Google Map in the page, which can be configured with a specific center location and zoom level. Contains Map Marker elements.

<thirdparty:googlemapmarker>
Placed inside the above tag as child elements, this control specifies the location of markers to appear on the map.

A Simple Example 


The following code will generate the above example: 

<thirdparty:googlemap width="100%" height="400" zoom="4"> <thirdparty:googlemapmarker address="Brisbane Australia"></thirdparty:googlemapmarker> </thirdparty:googlemap>

Populate Maps with Contacts

The advanced example below shows how to populate Map Markers using addresses of a Group of Contacts. The same approach would also work with Posts, using custom fields to specify coordinates or an address: 

Please note - this approach requires an API key (more on that below).

<thirdparty:googlemap id="directory_googlemap" apikey="PASTE-API-KEY-HERE" height="450" width="100%" center="Australia" zoom="4"> <data:repeater datasource="\Components\Customers\Groups::getContactsInGroup('/directory/')" as="contact" datafilter="[? [['contact_address', '!=', null], 'AND', [['contact_profile', '=', 1]]] ?]"> <thirdparty:googlemapmarker address="[? $contact['contact_address'] ?]"> <a href="/community/contact/[? $contact['contact_id'] ?]/" style="color: rgb(46, 59, 78); text-decoration: none;"> <logic:if test="$contact['contact_picture']"> <standard:image src="[? $contact['contact_picture'] ?]" width="50" height="50" style="margin: 5px;" /> </logic:if> <logic:if test="$contact['contact_company']"> <h5>[? $contact['contact_company'] ?]</h5> </logic:if> <logic:else> <h5>[? $contact['contact_username'] ?]</h5> </logic:else> </a> <p>[? $contact['contact_address'] ?]<br /> [? $contact['contact_suburb_city'] + ' ' + $contact['contact_postcode'] + ' ' + $contact['contact_state'] + ' ' + $contact['country_id'] ?]</p> </thirdparty:googlemapmarker> </data:repeater> </thirdparty:googlemap>

API Keys & Pricing

As of July 2018, Google Maps is now a paid service. At present, Oncord absorbs the cost of embedding simple, single pin maps (ie. a map you'd find on a website contact page).

However, some additional features are enabled when an API key is provided.

For larger maps where quite a few more pins are required, it's best to walk your client through the process of signing up for their own API key.

The client / website owner should follow the steps included in this article to register an API key, which you can then add to the map: 

https://developers.google.com/maps/documentation/javascript/get-api-key

After you've generated an API key, it can be easily added to an existing map via the page editor. Otherwise, it can be defined by adding an "apikey" attribute to the <thirdparty:googlemap> control.

Adding an API key unlocks the following features; 

  • Add multiple pins to the Google Map.
  • Dynamically populate the map with pins from Contact or Post data, as shown in the above example.
  • Choose from some pre-defined map styles, or define your own.