Our Yelp Widget supports adding a Google Maps below your results. Google now requires a Maps API key to embed maps on your website. This article shows you how to create the API Key. In the next version of Yelp Widget we will be adding an option to insert the API key into your Yelp Widget Settings. While we work on this update please use this free plugin to add a Google Maps API key. This will enable use of the Maps feature in Yelp Widget.

Watch or Read?

Watch the whole process from start to finish with this video screencast, or skip below to read through it.

Google announced on June 22, 2016 that all embbeded Google Maps must use an API Key.

In order to embed a Google Map on your website, you’ll need to integrate a “Google Maps Javascript API Key” into your site. This is done through the Google Console and by pasting the API key into your Yelp Widget Pro Settings.

Navigating the Google Console

The Google Console is a central hub from which you can access and create any of the 100+ APIs and API keys that Google makes available. You can access the Google Console here: https://console.cloud.google.com (NOTE: A Google account is required)

The Google Console Dashboard
The Google Console Dashboard

Once you are logged in, you’ll need to create a “Project”. Do that by clicking on the down arrow to the left of your Profile Picture in the top right of the browser window. You’ll see a dropdown. From there click on “Create Project”.

Animation showing how to create a new Project in Google Console.
Animation showing how to create a new Project in Google Console.

Name your project something that relates directly to the purpose of this API Key, then click on “Create.” The process will take a few minutes to finalize.

The "Use Google APIs" tile in the Google Console
The “Use Google APIs” tile in the Google Console

Once the Project is created, you’ll see a Dashboard with several “tiles”. One of them says “Use Google APIs”. Click on the link that says “Enable and Manage APIs”.

Now you’ll see a categorized list of all the available Google API keys. At the top of that list is a search box. You’ll want to use the search box to find two APIs that need to be enabled:

  • Search for “Javascript”, then click on “Google Maps Javascript API”. Click “Enable” at the top of the screen. Then click on “Library” in the left-hand sidebar to return to the Search box.
  • Search for “Geocoding”, then click on “Google Maps Geocoding API”. Click “Enable” at the top of the screen.

You’ll see a notice informing you that you’ll have to create “Credentials” in order to use this API. Click on the “Go to Credentials” button to do that.

The "Go to Credentials" button in the Google Console
The “Go to Credentials” button in the Google Console

From there you’ll go through a 3-step process to generate your Credentials. In Step 1, the first option should be chosen for you. It should say “Google Maps Javascript API”.

The second option you’ll want to set to “Web Browser (Javascript)”.

 

After you click “Create” you’ll be presented with your API Key.

In the next version of Yelp Widget we will include an option to enter the API key in the plugin settings. In the meantime, please use this handy plugin to add the Google Maps API key and this will enable use of the Maps feature in Yelp Widget.