Google Places Geo-location Selector Custom Element for Kentico Kontent

This is a custom element for Kentico Kontent that allows users to easily get the geo-coordinates for a location using the Google Places API.

Screenshot

Quick Setup (for testing)

You can get started quickly using the currently version currently deployed to GitHub Pages. I do not recommend using this for anything other than quick testing only.

  1. Get Google API keys
  2. Deploy the code to a secure public host
  3. Follow the instructions in the Kentico Kontent documentation to add the element to a content model using the URL of where you deployed the code as the Hosted code URL and pass your configuration details via JSON Parameters configuration.

Deploying

Netlify has made this easy. If you click the deploy button below, it will guide you through the process of deploying it to Netlify and leave you with a copy of the repository in your GitHub account as well.

Deploy to Netlify

JSON Parameters

googleApiKey is your API key from Google.

center is the latitude and longitude for the center of the map when no place is selected.

{
  "googleApiKey": "YOUR_GOOGLE_API_KEY",
  "center": {
    "lat": -25.344,
    "lng": 131.036
  }
}

What is Saved?

The JSON object returned from the Deliver API matches the following signature:

{
  "name" : "15 Constitution Dr #2g, Bedford, NH 03110, USA",
  "position": {
    "lat":42.9546464,
    "lng":-71.50468160000003
  }
}

Getting API Keys

This custom element requires the use of Google's places and maps APIs. Follow the instructions in Google's documentation to get a proper key.

Developing

The Google Places Search element source code is available in this repository.

If you want to adjust the implementation, first download Kentico Cloud Custom Elements Devkit. Source code of this selector needs be positioned within /client/custom-elements folder. For further instructions on devkit implementation, please refer to Custom Element Devkit README.