If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

JS Animated Troubleshooter. Google maps do not show up (API Key issue)

This tutorial will show you how to deal with ‘This page was unable to display a Google Maps element’ error in JS Animated templates.

Google announced some changes to the Google Maps APIs authentication and usage limits.

Usage of the Google Maps APIs now requires a key. If you are using the Google Maps API on localhost or your domain was not active prior to June 22nd, 2016, it will require a key going forward. This is why such error occurs.

JS_Animated_Troubleshooter_Google_maps_do_not_show_up_0

To resolve the issue, follow the steps below:

  1. Go to https://developers.google.com/maps/documentation/javascript/get-api-key website and create authentication key by clicking ‘Get a Key’ button;

    JS_Animated_Troubleshooter_Google_maps_do_not_show_up_1

  2. Select the ‘Create a project’ option and click on ‘Continue’;

    JS_Animated_Troubleshooter_Google_maps_do_not_show_up_2

  3. Specify the required credentials: Name, Website URL and hit the ‘Create’ button;

    JS_Animated_Troubleshooter_Google_maps_do_not_show_up_3

  4. Copy your new API Key:

    JS_Animated_Troubleshooter_Google_maps_do_not_show_up_4

  5. Open the /js/script.jsfile on your server;

  6. Locate the Google map script, it usually looks like the line below:

    $.getScript("//maps.google.com/maps/api/js?sensor=false&libraries=geometry,places&v=3.7"
  7. Add the following line to the end of the script:

    &key=API_KEY

    Here API_KEY is your newly created API key. The result should be as follows:

    $.getScript("//maps.google.com/maps/api/js?sensor=false&libraries=geometry,places&v=3.7&key=AIzaSyDLCIQpVKxu47BRLu8tMtG70pk_Zro3_44"
  8. Refresh your website. Google Maps work properly now.

    JS_Animated_Troubleshooter_Google_maps_do_not_show_up_5