In this post, we provide 3+ fixes for the “this page didn’t load google maps correctly. see the javascript console for technical details.” error.
Google Maps is one of the most integrated navigation tool readily available to everyone for use to direct customers to their own physical business or organization locations.
With the use of geolocations, street view, and other features supported by Google Maps, customers and clients are able to navigate and see a preview of the location of the business or organization before visiting their office or store, reducing late arrivals and lost walk-in prospects.
However, with recent changes made on the application programming interface (API), most web developers building websites with Google Maps integrated on it are receiving errors about Google Maps not loading correctly.
Twitter Confusion
Over on Twitter, there are a bunch of users experiencing this error- check them out:
@eventorgwp Help! Google Maps displays this:
Oops! Something went wrong.
This page didn’t load Google Maps correctly. See the JavaScript console for technical details. It’s all the venues for all the events. Even when I try to add another venue, that message pops up.— 🌈GuinanResistsΩ #TeamPelosi #WeAreThePatriots (@GR8FL) July 11, 2018
@Builtvisible Hi guys! Friendly note to tell you that your interactive map on https://t.co/LP7QAbde2z is now throwing an error message:
Oops! Something went wrong.
This page didn’t load Google Maps correctly. See the JavaScript console for technical details.— Ethan Hays (@ethanhays) May 7, 2018
#SydneytoHobart pity the tracker is so unreliable… I m looking for the JavaScript! Msg from it: “This page didn’t load Google Maps correctly. See the JavaScript console for technical details.”
— FB (@FlyingBrandy) December 27, 2017
What Causes this Error?
One of the known reasons why this error pops up on your screen is the lack of an API Key. Such a case happens due to the recent changes in the Maps API. Those who are using Google Maps on their websites prior to June 22nd of 2016 will not be affected by the changes on Maps’ Terms of Use.
However, those using Google Maps API after June 22 will be seeing errors when using Google Maps API with a blank API Key because Google now stops support for keyless access. There are major changes on the API and script use for Google Maps, so it is best to check it out before integrating Maps to your own website.
Quick Video Fix
How to Fix this Error
If you are a web developer and you encounter this Google Maps’ error that says “This page didn’t load google maps correctly. See the JavaScript console for technical details”, you can follow these fixes:
1st Fix: Get a Key
Since the June 22, 2016 update, Google Maps API no longer supported keyless access. The API Key is unique to every user who requested it. To get your key, simply follow these steps which are outlined by LaTecnosfera:
- Click here to obtain a unique API Key To add, a free API key only supports 25,000 map loads per project per day. Premium Plan Cloud API users get higher volume than the regular map load maximum limit. You can also check Premium Plans by clicking here. As a Google Maps APIs Premium Plan customer, you have the option to use an API Key or a valid client ID each time you load the API. You can check more information about authentication parameters designed for Premium Plan customers in this link.
- Depending on the web platform or website service you are using, you can access your Google Map’s script code on the web service you are using. For those who are not direct web developers of their website, it is best to seek assistance from a competent web developer to avoid future problems when altering or editing your webpage script code. For those subscribed to paid web services, please talk to your user support / technical support for assistance.
- Last is to replace YOUR_API_KEY with the generated key. This should be located on the last lines of your JavaScript code. This is the line where you can find YOUR_API_KEY.
- Once you saved the code, wait for 5 minutes to refresh your webpage. If all goes well, congratulations!
So far, this is the most known fix to this kind of error. If you are not a programmer, you can ask for assistance from the website provider support of your subscribed web service. Notably, most Google Maps widget are already updated to the most recent terms of use on Maps API. If this error message pops up on your Google Maps widget on your website builder, don’t hesitate to ask help from your web platform provider.
Video Guide: How To Set Up A Google Maps API key
2nd Fix: Enable your API Library
User Nazwa Asshiba from Stack Overflow talks about enabling the API Library, especially for this Google Maps JavaScript API. To check whether your API Library is enabled or not, you can follow these steps:
- Go to the GCP Console API Library
- Select the project used to create the code for your Google Maps API
- On the API Page, click on Enable.
- Once enabled, you can see a comprehensive data table of your Google Maps API like traffic, errors, and latencies.
- You can refresh your webpage to check if Maps is successfully showing you locations. If it works well, congratulations!
You can check more of this fix on the Google Cloud support page, under Cloud APIs. There are considerations when doing this fix. Factors like Billing, Service Usage, and the Terms of Use could affect the performance of your Maps API. Should your website experience a high volume of traffic and increased visitor count, consider getting a Premium Plan for your APIs, especially your Maps API.
Video Overview: Getting Started with Google APIs (Python)
Forum Feedback
To understand more about the error message “This page didn’t load google maps correctly. See the JavaScript console for technical details,” we looked through several boards and support forums. In general, people were interested in “Oops something went wrong this page didn’t load google maps correctly,” Google Maps API keys, and Google Maps JavaScript API errors.
A website owner stated that he had run into trouble with Google maps and that he kept getting an error message saying, “This page didn’t load google maps correctly. See the JavaScript console for technical details.”
- Google Maps were working fine on some of his pages, so he was unsure was the issue was.
- Other users pointed out to him that Google had changed its terms regarding the usage of Google Maps and that it no longer supported keyless access.
Another computer expert explained that if you had been using Google Maps on your site before the implementation of API keys on 22nd June 2016, it would probably work normally. However, if you want to use Google Maps after 22nd June, you’d need to get an API key to load the maps. The user adds that you can get it from the Google Developers website.
Another individual remarks that the API key is valid for 25,000 requests per day and that if your requests exceed that number, you’ll need a digital signature. The person also states that using Google Developers site is an excellent solution if you’re not certain how to get an API key, but he warns that you’ll have to create a billing account and think about restricting your key’s usage.
A poster points out that you might not have implemented your API key correctly if you continue to see “This page didn’t load google maps correctly. See the JavaScript console for technical details.” He suggests that you check that you’ve substituted the valid API key in the place of YOUR_API_KEY in this code – https://maps.googleapis.com/maps/api/staticmap?center=40.714%2c%20-73.998&zoom=12&size=400×400&key=YOUR_API_KEY.
Another fellow board member also observed that you have to enable the API Library for Google Maps JavaScript API.
- He also explains that if you’re a using a premium plan with client parameters, there are additional steps you have to take.
- The user states that if you see that the page can’t load Google maps, then you haven’t authorized the URL, on which you’re loading the API.
- To fix that problem, you should log into your Google Cloud Support Portal > Maps > Manage Client ID.
A person said that he did all the right steps to acquire an API key and inserted it in the right spot. However, he kept getting the same mistake that Google maps were not loading correctly. However, once he thought about it, he realized that he had actually missed to do something and that was to enable the API for use on the site.
An individual said that the error “This page didn’t load google maps correctly. See the JavaScript console for technical details” might be caused by a couple of things. To determine what your issue is, you just have to open your JavaScript console and look for a Google Maps API error that will specify if the problem is a lack of API key, unauthorized URL, disabled API, or incorrect API key. Then you can employ the right solution.
Another user points out that if you continue to experience problems loading Google maps, you should check your JavaScript console carefully in case you have missed an error. He also mentions that changes might take a couple of minutes to take effect, so you might wait five minutes before trying a new solution. The user also said that for those using a caching plugin, you might try to clear the cache and see it if it will do the trick.
A user commented that he also couldn’t get the Google maps to load properly and that he spent a lot of hours looking for the problem. However, it turned out that he had mistyped the domain name when getting the API key and that correcting the name of the domain in the Google API site fixed the problem.
An individual recommends that you read through the Error Message section of the Google Developers Website and that it would give you a good idea where to start looking for the issue. He also states that you should first recheck that your API key is valid and that you are not in conflict with the restrictions.
Conclusion
The main reason for this error is the update of terms of use on Maps API which limits or stops the support on keyless access. However, getting an API key is also readily available on Google Cloud’s support platform. This update is done for Google to allow contact to developers when required and help them identify misbehaving implementations.
The best way to fix the missing key error is to obtain an API key and replace it on the YOUR_API_KEY code on your JavaScript console. If it does not work, check whether your Maps API is enabled on your Google Cloud API account, check the billing and service usage limits to fully understand the restrictions and fair use of the service platform. There is a defined limit of use for Standard and Premium Plan customers. Also, it is best to contact Google support should you encounter further problems after doing all possible fixes for this error.
If you are a visitor of the website and you encounter this type of error, send the owner of the website a message right away to let them know of this Maps issue. However, if the website has heavy traffic and is supported only with a free API key, you will surely encounter a message that the developer has reached the maximum loads for Google Maps integrated on their webpage for that day.
