Google Maps not working

Since few days, some of you may encounter an issue with their Google Map element:

Google provides the Google maps service for free, but — due to a change of the policy — this service now requires a valid key for the site displaying and using the maps. Sites that used the API without a key prior to June 22, 2016 have been grandfathered to allow them to continue to work.

There are currently two solutions out of this situation:

  1. Use the native Visual Composer Google Maps element where you can insert the map iframe element - doesn't require API at all.
  2. Create the API key and use the custom stylized Google Map element from the theme. Please continue reading to learn how.

Creating the API Key

If you don't have a key please follow the steps below to create one:

1. Go to https://console.developers.google.com/apis and create a new project (you must be logged in):

A small popup window will shop up where you can insert your project name:

2. After the project is created, please click on the "Google Maps JavaScript API" link:

Click on the "Enable" button:

3. Now, you will need to create the API credentials: go to Credentials tab, click on the "Create credentials" button and choose "API key" from the dropdown list:

From the popup window choose "Browser":

Fill in the form with your website's domain name and click "Create":

FInally, a popup window with your API key will show up:

That is the key you are looking for. Please copy it co your clipboard as we will need it in the next step.

5. Now, all you need to do is paste your API key in the Theme Options / Google Maps / Google Maps API Key field. The field location may different, depending on which theme you use:

North & Qaro: Theme Options / Google Maps / Google Maps Api Key:

Waxom & Crexis: Theme Options / Google Maps API / Google Maps Api Key:

Now save the Theme Options panel and you are again able to use the stylized Google Map element.