See javascript console for details как исправить
Перейти к содержимому

See javascript console for details как исправить

  • автор:

exception thrown see javascript console что делать

Аватар пользователя Aleksey

Сообщение "exception thrown see javascript console" обычно появляется в случае возникновения ошибки в скрипте JavaScript.

Для того, чтобы исправить ошибку, следует выполнить следующие шаги:

Откройте консоль разработчика в браузере, нажав F12 или Ctrl+Shift+J (для Chrome, Firefox, Edge) и вкладку "Console".

Перезагрузите страницу, чтобы увидеть сообщения об ошибках в консоли.

Исправьте ошибки, которые появляются в консоли. Обычно они указывают на строку, в которой произошла ошибка.

После исправления ошибок перезагрузите страницу и убедитесь, что сообщение "exception thrown see javascript console" больше не появляется.

Cryptic "Script Error." reported in Javascript in Chrome and Firefox

I have a script that detects Javascript errors on my website and sends them to my backend for reporting. It reports the first error encountered, the supposed line number, and the time.

EDIT to include doctype:

crossorigin is equivalent to crossorigin=anonymous and tells the browser to do a CORS fetch of the script without sending credentials.

You must ensure that the script is sent with an Access-Control-Allow-Origin HTTP header value that matches the requesting domain, e.g.,

otherwise the browser will cancel loading the script.

(And see CORS examples for other web servers.)

If you’re sending scripts in PHP:

I’ve tested this and it works as expected. all errors from the script.js will be caught by the window.onerror handler with message, file and line details.

The WebKit bug hasn’t been fixed yet, but a patch has been proposed (and uses the same solution). Hopefully the fix will be released soon.

sam's user avatar

This one took quite a bit to figure out.

We did a bunch of stuff to try and solve it, including doing things like dumping the WHOLE document body back to our servers via Ajax to try and figure it out.

I am still unsure what causes «Script Error.» (with the period BTW, that’s how it shows up in our Ajax logger) in Firefox, but in Chrome, we were able to narrow it down to.

The auto translate feature of Google Chrome.

Many English speaking people probably do not even know about this feature, but to test it, I guess visit a non-English site using Chrome. Or better yet, if you dig thru the Chrome options, there’s a spot to change the browser language. Change it to something non-English, restart the browser, and visit an English site.

You should get the bar at the top asking if you would like Chrome to translate the page for you.

In our case anyways, the translator was causing the issue since it injects a script tag into your document body and (guessing here) uses some sort of JS-based system to send the content to Google’s servers and get them to translate it.

Even though the error in the console was Unreferenced something, the message that was being sent to window.onerror was «Script Error.».

Anyways, there is a cure.

This will do 2 things (as far as we know, maybe more?):

a) Disable the translate bar from popping up in Chrome.

b) Disable translating of the the page via translate.google.com.

In our situation anyways, this solved A TON of these «Script Error.» issues we were experiencing.

Excuse the spelling mistakes in this post, I am still on a non-English mode in Chrome writing this, and the spell checker is not set to English 😉 Time to switch back.

How to Fix: Something went wrong. This page didn’t load Google Maps correctly. See the JavaScript console for technical details.

So after finishing the website for a client, I get a call about the maps not showing. Felt very embarrassed about it. First, let’s find out exactly why it’s showing. There are multiple things that can cause it. Notice the last part of the error says to open the JavaScript console for “technical details”. That’s what we need.

Oops! Something went wrong. This page didn’t load Google Maps correctly. See the JavaScript console for technical details.

Fix!

You can open the JavaScript console in your browser with a few keystrokes. There is an excellent answer on StackOverflow that tells you plainly how to open the JavaScript console in different browsers. After doing that, you should be able to find an entry looking something like this.

Google Maps Console Error

Listed below are the most common errors reported by our users:

  • MissingKeyMapError – An API key is not being used
  • RefererNotAllowedMapError – Key doesn’t allow your URL
  • ApiNotActivatedMapError – API is not enabled
  • InvalidKeyMapError – The API key used is incorrect

Now that you know exactly what is causing the error, you can fix it. Here are fixes for the most common Google Maps API errors shown in the console.

How to Fix MissingKeyMapError

MissingKeyMapError means you are not using an API key and will need to sign up for one then configure your website to use it. Websites that started using Google Maps on or after June 22, 2016 require an API key in order for maps to show.

Create a Google Maps API Key

Follow these steps to create and implement a free Google Maps API Key.

Google Maps API Register

  1. Start Google’s Get a Key process then log into your Google account (or create one).
  2. Click Agree and continue to create a new project representing your website.
  3. Under Accept requests, add the two entries below (replacing yourname.comwith your own domain). Type the first entry then hit enter on your keyboard to add it. Repeat to add the second entry. Having both entries (with asterisks) will help ensure your maps work on any URL of your website.

Booooyaaaah!

Screen Shot 2017-08-28 at 14.40.46

Note: Google says it can take up to 5 minutes for your key to become active. Mine came up immediately.

This page didn’t load google maps correctly. See the javascript console for technical details

What caused the error ‘This page didn’t load google maps correctly. See the javascript console for technical details’?

Nowadays, many websites are using Google Maps to make the information clearer and more visual. However, sometimes, there will be the error This page didn’t load google maps correctly. See the javascript console for technical details. What’s happened?

Actually, this error appears because of some reasons. One of the most common ones is lacking an API key. In other words, before Jun 22nd, 2016, Google supports users to utilize Google Maps without an API key. That means you can integrate or embed Google Maps to your site with a blank API key. However, from Jun 22nd, 2016 onwards, the Maps’ Terms of Use had been changed and you need to use Google Maps with an API key. If not, the error will occur on your site.

So, in the blog today, we would like to show you the methods of how to deal with this error This page didn’t load google maps correctly. See the javascript console for technical details. Let’s start!

This Page Didn't Load Google Maps Correctly. See The Javascript Console For Technical Details -1

How to solve the error ‘This page didn’t load google maps correctly. See the javascript console for technical details’?

If you are paying for the Google API key, then skip this step. Conversely, in case you want to display the map on your site for free, you can learn more to add Google Map to WordPress and add Google Map to Joomla 4 articles.

Now, the first step you need to do is determine what type of error appears on your site. In order to do that, you need to open the Javascript console to see the error. Simply enter the key combination below:

  • Chrome: Ctrl + Shift + J (Windows and Linus) or CMD + Opt + J (Mac OS).
  • Safari: CMD + Opt + C.
  • Firefox: Ctrl + Shift + K (Windows and Linus) or CMD + Opt + K (Mac OS).

There error ‘This page didn’t load google maps correctly. See the javascript console for technical details’ will have 4 error types, including:

  • Google Maps API Error: MissingKeyMapError.
  • Google Maps API Error: RefererNotAllowedMapError.
  • Google Maps API Error: ApiNotActivatedMapError.
  • Google Maps API Error: InvalidKeyMapError.

Each type will have a different solution, so after knowing the error of your site, we will move on to the following detailed methods.

MissingKeyMapError

This error occurs when you don’t use any API key. Thus, you need to create and get a Google Maps API key.

This Page Didn't Load Google Maps Correctly. See The Javascript Console For Technical Details-2

Let’s follow the steps:

  • Access Google Maps Platform -> Click on the Get Started.
  • Fill out some information -> Create a project.
  • Add payment method -> Select the products -> Choose Maps.
  • Click Enable -> Answer a short survey.
  • A popup with generated API key will be showcased -> Copy it -> click Done.
  • Open Geolocation API -> Press Enable.
  • Choose Credentials on the menu -> Click Maps API Key.
  • Select HTTP Referrers in the Application restrictions section.
  • In the Website restrictions section, utilize Add an item to add two entries, including yourname.com/* and *.yourname.com/* (remember to change yourname.com into your domain).
  • Click the save button -> Use the API key for the Google Maps of your site.

RefererNotAllowedMapError

The error is the most common of 4 Google Maps API Error types. There is something wrong with the Application restrictions. So, you need to check it to ensure everything is exact.

This Page Didn't Load Google Maps Correctly. See The Javascript Console For Technical Details-3

In order to tackle this error, simply implement the following steps:

  • Open Credentials Console.
  • Find the API key’s name -> Click to edit the setting.
  • In the Application restrictions section, check that you have already chosen HTTP referrers (websites) as well as added both of the entries: yourname.com/* and *.yourname.com/* (make sure to replace yourname.com with your domain).
  • Click Save and wait a few minutes -> Refresh the site to check the result.

ApiNotActivatedMapError

This error happens because you may not enable the API you are using. Thus, all you need to do is enable it.

This Page Didn't Load Google Maps Correctly. See The Javascript Console For Technical Details-4

If you want to solve this error, let’s start:

  • Access Library Console.
  • Click on View All to see all APIs -> Find the API you are utilizing -> Press it.
  • Click on the Enable button at the top of the screen.

InvalidKeyMapError

This error means that the API key you are utilizing is wrong. So, you simply copy the API key you created before and paste it to your site.

This Page Didn't Load Google Maps Correctly. See The Javascript Console For Technical Details-5

To solve this trouble, you just need:

  • Go to Credentials Console.
  • Copy the API Key.
  • Open your back-end site and paste the key -> Save.
  • Wait a few minutes -> Refresh the site and see the result.

Note: If the error ‘This page didn’t load google maps correctly. See the javascript console for technical details’ still appears after implementing the steps above to solve one of the 4 error types, it’s necessary for you to notice:

  • Wait at least five minutes for all changes to take effect.
  • Clear the cache.
  • Check the console as well as each step of the solution again to make sure you follow the true process.

Closing thoughts

In conclusion, we have already shared with you the methods to address the error ‘This page didn’t load google maps correctly. See the javascript console for technical details’. Therefore, we hope that you can deal with this issue in a quick and smooth way. If you have any queries, don’t hesitate to leave your comment below.

Last but not least, we are offering both free WordPress Themes and Joomla 4 Templates. All of them are responsive and SEO-friendly, so if you want to get a great one, let’s have a look at the collection. Thanks for your reading and hope you enjoy the blog.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *