Google Maps API

Setting Up Your Google Maps API Key

 
https://yootheme.com/support/question/100254
 

As of version 4.2.1, The Events Calendar allows you to enter your Google Maps API key to help avoid map timeouts and API error messages. This should be especially helpful for sites with a lot of traffic.

The Google Maps API Key is used for the following features:

  • Venue location maps on single events
  • Maps on single venues
  • Events Calendar Pro’s Map View

It is not used for the following features:

  • Retrieving the latitude and longitude from a Venue’s address
  • Filter Bar‘s location-based searches

Obtaining an API Key

Google Maps JavaScript API - Overview

Before you can enter your API key in your site’s settings, you need to obtain a Google Maps JavaScript API key from Google.

At the above URL, click the “Get a Key” button and create a “project”. Give the project a descriptive name—it’s mainly just for your own reference, but a simple and descriptive name works best regardless.

After creating a project make sure to enable both the Javascript API and the Google Maps Geocoding API for your keys to work. Follow the respective links for each and click enable to do that.

You should end up creating a new project with a browser key for the Google Maps JavaScript API.

Google Maps JavaScript API - API Credentials

Entering and Testing Your API Key

Once you obtain one of the aforementioned browser keys, you can enter it in your wp-admin settings for The Events Calendar. You’ll find the relevant settings in the Events → Settings → APIs tab.

Google Maps JavaScript API - The Events Calendar settings

An easy way to tell if your API key is not being used at all (e.g. you never entered one in the settings) is looking at your site’s console for a message like this:
Google Maps JavaScript API - NoApiKeys

After entering your API key in the settings, you should no longer see this yellow warning message in your site’s console.

Note that the API may send other messages to your console, such as API Not Enabled or Key Over Limit, and these console messages are not from our plugin.

Pro tip: If your APIs tab is not visible, it is possible that your site is part of multi-site network.

Under Network > Settings > Events Settings, there’s an option to hide tabs on different sites.
We recommend contacting your WordPress network admin to fix this issue.

Using Your API Key

⚠️ Please note: Unless you enable billing, your Google Maps JavaScript API key will be subject to the Standard Usage Limits, allowing up to 25,000 map loads every 24 hours

Also note that Google’s JavaScript maps cannot be cached because they are interactive.

We highly recommend following Google’s best practices for securely using API keys.

Possibly the easiest and most effective action you can take is restricting your API keys to specific referrers (i.e. web sites).

When generating your API key, you should whitelist your domain(s) so owners of other domains cannot steal your API key’s usage.

We recommend that you include two urls like this (thanks alphagod1 for the tip):

  1. *.example.com/*
  2. *example.com/*

(notice with and without preceding dot)

More Examples:

  1. If your site is https://example.com/ (“naked” domain without www), you should enter example.com/*
  2. If your site is https://www.example.com/ (non-www always redirects to www) or http://wp.example.com/ (subdomain), you should enter *.example.com/*
  3. If your site is https://example.dev/ (localhost development via DesktopServer), you should enter example.dev/*

⚠️ Please note: The asterisks used in these example URLs are intentional and important! They are wildcards that do not match “nothing”, which is why *.example.com/* will not work for https://example.com/. You can also add multiple rules to a single API key, if needed.

Add Feedback