Creating Google Maps API Key Restrictions

You can use your own Google Maps API Key with The Events Calendar to get more out of your venues and maps. In fact, we recommend it!

⚠️ Important: the Google Maps API key you use to display map elements in your calendar views has to be exposed (in fact, Google might warn you about this). That is fine as long as you put some restrictions on the key. This will avoid theft and misuse of your Google Maps API key (which can result in important costs).

But that’s just part of the story (bear with us)…

The Events Calendar requires three APIs to be enabled:

• the Maps JavaScript API,
• the Geocoding API, and
• the Maps Embed API.

(You can find detailed information about setting up your Google Maps API Key in this article.)

These three APIs, however, cannot work with the same restrictions. The workaround is to use two separate Google Maps API Keys.

Set up one Google Maps API Key for JavaScript map displays.

For this key should select “Websites” as the restriction. The value should be your domain name, for example https://example.com.

In the API restrictions section select:

1. Maps JavaScript API
2. Maps Embed API

See the screenshot on the right for reference.

Create a second API Key for venue geolocation lookups (Events Calendar Pro) with Geocoding API.

This key should select “IP addresses” as the restriction. The value should be the IP address of your website.

Under the API restrictions select:

1. Geocoding API

Again, check out the screenshot on the right for reference.

Code

We have a handy extension available that can help you achieve this. If you would rather like a snippet, read further.

Since there is only one field for the API key in the settings panel (under Events > Settings > Integrations) you will need some code as well. Paste the following into your child theme’s functions.php file, use the Code Snippets plugin to add custom code to your site, or create a separate plugin from it.

The first API key that you use for Maps JavaScript API (and Maps Embed API), enter under Events → Settings → Integrations tab → Google Maps API key.

The second API key that you use for Geocoding API put in the appropriate place in the code, where it says IP_ADDRESS_PROTECTED_API_KEY.

<?php
/**
 * Facilitates dictating a separate (IP-address protected) Google Maps
 * API key for server-side geocoding requests.
 */
class Server_Side_Google_Maps_Key {
	/**
	 * @var string
	 */
	private $key = '';

	/**
	 * Sets up a Google Maps API key to be used for server-side initiated
	 * geocoding requests.
	 *
	 * @param string $key
	 */
	public function __construct( string $key ) {
		$this->key = $key;
		add_filter( 'pre_http_request', [ $this, 'pre_http_request' ], 10, 3 );
	}

	/**
	 * @param mixed  $response
	 * @param array  $args
	 * @param string $url
	 *
	 * @return array|WP_Error
	 */
	public function pre_http_request( $response, $args, $url ) {
		// If this is not a Google Maps geocoding request, or if it is but our replacement
		// key is already in place, then we need do nothing more.
		if (
			0 !== strpos( $url, 'https://maps.googleapis.com/maps/api/geocode' )
			|| false !== strpos( $url, $this->key )
		) {
			return $response;
		}

		// Replace the API key.
		$url = add_query_arg( 'key', $this->key, $url );

		// Perform a new request with our alternative API key and return the result.
		return wp_remote_get( $url, $args );
	}
}

// Specify our alternative API key here (to be used for server-side geocoding requests).
new Server_Side_Google_Maps_Key( 'IP_ADDRESS_PROTECTED_API_KEY' );

Compatible plugins

• The Events Calendar
• Events Calendar Pro

Notes

• Originally written in 2018
• Snippet by Cliff Paulick
• Author: Andras Guseo