Hi Students!

In the next video, you will configure Google Maps, and there are a few differences in the way it works now. In June 2017 Google started requiring the use of an API key to embed interactive maps on your website or application. then in July 2018 they began requiring that billing details be provided. There's a free level, but you have to have a Google account (your Gmail address) and enter billing details like a credit card.

You can use the following steps to prevent ever having any charges.

Alternatively, you can use the open-source OpenLayers API, which is free and doesn't require any registration to use. the WP Google Maps plugin allows you to use OpenLayers instead of Google Maps.

There are also instructions (and links to Google Developers Area) for getting your API key, in the settings areas of the plugins we use.

Here's a link to set up your Google Maps API key: https://console.developers.google.com/apis/dashboard

Use these guidelines to prevent Google Maps API charges:

How to monitor usage and set limits - Google Developers Article

When you get your Google billing details set up, here are the specific steps to take, so you can set your daily limits to prevent any charges:

  1. Go to the Cloud Platform Console.

  2. From the projects list, select a project or create a new one.

  3. If the APIs & services page isn't already open, open the left side menu and select APIs & services.

  4. Click the name of the API you're interested in.

  5. Click Quotas.

  6. On the requests per day or requests per 100 seconds per user line, click the edit icon, then enter the preferred total billable daily quota, up to the limit specified by Google.

Here are some API setup tips:

Getting the API key from Google - if you did this and are still getting the Javascript error, the most likely problem is that you don't have a "Referrer" approved in your Google Dev Console for your API key.

You can test this by using the Developer Tools in your browser, to make sure this is the problem. In Firefox (Mac) use CMD > OPT > K to open the javascript console, and in Chrome (Mac), use CMD > OPT > J. For Windows, it's CTRL > SHIFT > K (or J).

You can also just open Developer Tools in either browser and find the javascript tab.

If you see the error is related to the "Referrer" then proceed to your Google API manager, and add your domain, like so:

I've had success with just placing the bare URL in the HTTP referrers field - NOT as they suggest, with the asterisk and slashes. For example, in my test just now, using *.greggdavis.com/* did not work, but just plain greggdavis.com made the error disappear.

Feel free to ask any questions in the Q&A section!

Gregg