DeveloperTutorials for Web Developers & DesignersOther

Google Maps


This tutorial will provide a walkthrough of how to embed a Google Map on an Oncord powered website.

Use the Visual Editor

Using the visual page editor is a fast, easy way of adding and configuring a basic Google map. To do this, simply edit a 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:

<ss: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.

<ss: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: 

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: 

API Keys & Pricing

As of July 2018, Google Maps is now a paid service if you want to embed it on a website.

At present, Oncord absorbs the cost of embedding simple, single pin maps (ie. a map you'd find on a website contact page).

For bigger maps where quite a few more pins are required, the client needs to sign up for their own API key.

At the time of writing (2020), Google currently provides a $200 credit per account. This equates to approx 28,500 dynamic Maps web loads per month. (https://cloud.google.com/maps-platform/pricing/).

The client / website owner should follow the steps below to register an API key, which you can then add to the map.

1) Sign in with a google account here: https://console.cloud.google.com/

2) Create a "New Project" for the website.

3) Navigate to "APIs & Services" and enable the "Google Maps JavaScript API", as well as the "Geocoding API".

4) Under billing, enter your credit card details.

5) Under the Google Maps API, create a new credentials. Create an API key. 

The API key is specified by adding the attribute apikey to the Google Map control:
<ss:thirdparty:googlemap apikey="paste-api-ke-here">