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:
Embeds a Google Map in the page, which can be configured with a specific center location and zoom level. Contains Map Marker elements.
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.
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: