Menu

#1456 Google maps

Parent Category:
DPCalendar
Category:
Maps setup
Last Updated:
Allon Moritz, Wednesday, 06 October 2021 19:35
Created:
Tuesday, 30 September 2014 06:05
Hits:
18202

Introduction

Google maps is well known for good map products. They also offer neat integration into any web site through a rich API.

To make it work in DPCalendar, a Google maps API key is needed. You must set up a Google Developer Account and activate the Map Geolocation, Map Places and Javascript API. Then create two different keys and copy them to DPCalendar. All of that is described in more detail in the chapters below.

Billing information

Google has a pay as you go pricing plan, where they give you some credits (actually it is 200$) each month. So for low usage web sites it should be free. They have compiled an extensive article about all aspects of their billing process and prices. All depends on which SKU (a SKU is the combination of the Product API + the service or function called) you are using as they have different prices per request. DPCalendar uses the following SKU's:

They even have an online calculator where you can play around with your requests and it will tell you how much you have to pay. For example if you have 25'000 page views with a map, 7'000 map searches and you create 100 locations per month, then you still pay nothing.

Enable API

Go to the Google developer console and either log-in to your account or create a new Google account. Select or create your project name. Go to API Library and enable the Geocoding API, Places API Web Services and the Maps Javascript API. The easiest way is to search for them as the list of different API'S is huge. When found, open the API service and then click on the Enable button. This action will activate the API under your Google account.

Google maps apis

Initialize consent screen

Click Consent screen on the left side of the screen. Enter your email address and save. The other items are optional. The consent screen will be shown to users whenever you request access to their private data using your client ID. This screen will be shown for all of your applications registered in this project.

Google maps consent screen

Create API key

Open the Credentials tab and then click on the Create credentials button. Select API key and the key is created automatically. Create two different keys. One will be used for the Javascript maps on the front end and the other for the geolocation and instant search lookup.

Google maps server key

Application restrictions

To prevent the keys being abused on sites you don't want then you can define some application restrictions on the keys itself. These rules will tell the Google API that they can only be used on a specific web site or web server. To define these restrictions, click on one of the defined keys in the list and then the edit form will open with all the parameters to restrict the key.

  • Javascript API Key
    For this key you can either define the web site url (eg. example.com) as HTTP referrer or the IP address (eg. 192.168.68.91 or an IPV6 address) of your web server as restriction. For simplicity we recommend to use the HTTP referrer.
  • Geocoding API Key
    For this key you can define only the IP address (eg. 192.168.68.91 or an IPV6 address) of our web server as restriction. Because this key is used for web services where only server to server communication is done.

What we couldn't make work are the API restrictions. The services never worked with them in place on our web site. So better to not restrict on particular API's.

Google maps restrictions

Getting the keys

You will see your new Public API keys on the dashboard. If you click on the name of the new key, you can edit it and restrict it to Web site names or IP addresses.

Google maps get keys

Copy to DPCalendar

Copy and paste the API key to the DPCalendar Options. On the Integration tab select Google Maps as map provider and fill in your keys. Create for Geocode and Javascript a different key. Clear your Joomla cache and open a DPCalendar - Calendar menu item or an external event (eg. from Google) which has a location. The maps should be shown properly and the events location should have now all required information like street and latitude/longitude. Sometimes it can take a couple of hours till Google handles the key properly.

Google maps options

Comments (0)

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.