Posts

If you see this error “Oops! Something went wrong. This page didn’t load Google Maps correctly. See the JavaScript console for technical details.” in place of maps on your website. This error has become a lot more common since Google Maps started requiring an API key on June 22, 2016 (after about 10 years of allowing keyless use). If you started using Google Maps on your website on or after that date then you will need to sign up for and implement an API key (older users still do not need a key).

Google has not made setting up an API key a very user-friendly process. Their interface is geared towards developers. As such, many users have trouble correctly creating a key. This guide is not just for our WordPress theme and plugin users but for anybody on the Internet who wants to know how to fix the “This page didn’t load Google Maps correctly” error on their website.

Find the Cause of “This page didn’t load Google Maps correctly”

First, let’s find out exactly why the “This page didn’t load Google Maps correctly” error is showing. There are multiple things that can cause it but fortunately, Google gives us a way to learn the specific reason. This helps us know what to do to fix 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.

READ ALSO: How to fix CPU Problems in WordPress

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.

Fix the “This page didn’t load Google Maps correctly” Error

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 Google Maps API Key.

      1. Go to the Google Maps Platform welcome page then click Get Started. You may need to log in or create an account if you do not already have a Google Account.
      2. Google will ask you for some information. If it asks you to create a project, go ahead and do that (no worries if not). You must add a payment method even though Google gives you a very large amount of free credits every month. To date, none of our customers have reported needing to pay anything for Google Maps.
      3. You will then be asked to choose products. Choose Maps then click Enable then answer the short survey.
        Google Maps Products
      4. An API key will be generated and shown. Copy it to your clipboard with the button on the right then click Done.
        Google Maps API Key Copy
      5. Login to your WordPress admin area and paste the API key into your plugin then click Save Changes. Do not stop on this step. You still need to secure your key.
        Location Settings
      6. Return to the Overview on Google Maps Platform. Under Enabled APIs (you may need to scroll to see this), click View all APIs.
        Google Maps Enabled APIs
      7. Under Additional APIs, click Geocoding API then Enable.
        Enable Geocoding API
      8. Now choose Credentials in the menu to prevent other websites from using your key.
        Google Maps Credentials Link
      9. Click your “Maps API Key” and select HTTP referrers under Application restrictions.
        Google Maps API Restrictions
      10. Under Website restrictions, use ADD AN ITEM twice to add the two entries below (replacing yourname.com with your own domain).yourname.com/* *.yourname.com/*Google Maps API HTTP Referrers
      11. Click Save at the bottom and you’re done.

Note: Google says it can take up to 5 minutes for your key to become active. We’ve heard reports of it taking 30 minutes or longer. Keep this in mind if your maps do not show right away.

READ ASLO: Google and Facebook to Build Transpacific Submarine Cable

How to Fix RefererNotAllowedMapError

RefererNotAllowedMapError is the most common error we’ve seen apart from not using a key. The console will also say, “Your site URL to be authorized”. It relates to Steps 9 and 10 above when creating your key. Here’s how to fix the error.

  1. Go to https://console.developers.google.com/apis/credentials
  2. Click your API key’s name to edit its settings.
  3. Under Application restrictions, make sure “HTTP referrers (web sites)” is selected and that you have added the two entries below (replacing yourname.com with your own domain). Both are necessary and be sure that have you appended /* to the end.yourname.com/*
    *.yourname.com/*

    Google Maps API App & Web Restrictions
  4. Click the Save button then wait a few minutes for the change to take effect (Google says it can take up to 5 minutes).

Tip: If you have multiple projects, make sure you are working with the correct one by using the dropdown at the top.

How to Fix ApiNotActivatedMapError

Google Maps has more than a dozen different APIs. That’s a lot! The Google Maps JavaScript API is the most popular. Whichever API you are using, it’s possible that it is not enabled in your account. Let’s fix the ApiNotActivatedMapError error by enabling the API you’re using.

  1. Go to https://console.developers.google.com/apis/library
  2. Under “Maps”, click “View All” to see all API’s.
  3. Click the API you’re using. Our themes and plugins use the Maps JavaScript API, Maps Static API and Geocoding API. Your product may use something different but the JavaScript API is most common for a website.
  4. Click the Enable button at the top and wait a few minutes for the changes to take effect (Google says changes can take up to 5 minutes).
  5. Repeat for other API’s you’re using (remember, our themes and plugins use the Maps JavaScriptMaps Static and Geocoding API’s).

Tip: If you’re using a different product than ours, you may need to enable a different API. If you’re unsure which API to enable, you can try enabling all of them (or ask your provider).

How to Fix InvalidKeyMapError

InvalidKeyMapError simply means the key you implemented is wrong. In other words, you created it but did not enter it into your website correctly.

  1. Go to https://console.developers.google.com/apis/credentials
  2. Copy your key.
    Google Maps API Key
  3. If you’re using the Church Content plugin, go to Settings > Church Content > Locations and paste your key into the Google Maps API Key field then click Save Changes. Otherwise, do similar according to the product you’re using.
    Location Settings

How to Fix Other Errors

This guide covers the errors we’ve seen most commonly. There are other errors. To learn there causes and how to fix them, see the Google Maps API Error Messages documentation.

READ ALSO: 10 Reasons Why You Needs A Website For Your Small Business

It’s Still Not Working

Here are three things to check if you are still seeing the “This page didn’t load Google Maps correctly” error.

  1. Wait five minutes. Google says it can take up to five minutes for the changes to take effect. I have heard that it can take up to 30 minutes in some cases, but give it at least five minutes.
  2. Check the console again. Revisit the section above on identifying the cause of the error. It is possible that you had two errors to begin with but only solved one or that the one error remains because you did not tweak the settings correctly.
  3. Clear your cache. If you’re using a caching plugin, purge it’s cache. Otherwise, your key might not be used right away. It doesn’t hurt to clear your browser cache either.

If you’re one of our clients, please contact us for support and we’ll help get your maps working.

To make the long story short

We expect Google to improve the process of creating an API key now that they have made it a requirement for millions of non-developer users. Until then, we hope this guide will be helpful to many.

This July, Google is updating their Chrome internet browser to expressly inform guests when they’ve arrived on a site that isn’t secure. It’s presumable that other internet browsers will take after their lead with a specific end goal to make a more secure condition on the web.

As the need for online security expands, changes like this could negatively affect your business on the off chance that you don’t make a move to anchor your webpage.

Not exclusively will clients be less sure about working with a site that isn’t anchor, either influencing buys or marking to up for an email list. However, Google is additionally organizing destinations encoding their information to the highest point of the web crawler comes about page. That implies locales that are not anchor will appear at the base, which could affect the number of website visits originating from search.

We should investigate what should you do to ensure your site traffic is secure and abstain from being adversely affected by Google’s progressions.

What Google’s update implies for your business

When Google’s updated internet browser Chrome 68 is discharged in July, clients will know whether the website they’re going by isn’t scrambling activity from the ‘Not Secure’ message in the URL, as demonstrated as follows.

how Chrome 68 internet browser look like

On the off chance that clients see the ‘Not Secure’ cautioning, they will probably avoid entering any data on your site, such as making a buy or notwithstanding agreeing to accept your email list. Another sign is HTTPS toward the beginning of a URL with information encryption, rather than HTTP for a not anchor site. The URL for sites where activity is secured with an SSL will resemble the URL for afeeshost.com demonstrated as follows.

website with ssl certificate url

Clients will likewise be more averse to discover your site once Google rolls out the improvement to their program. In the event that your webpage is as yet not anchor, Google will rank your site bring down on the list items page, influencing your activity and income in the meantime.

Make your site secure with an SSL Authentication

An SSL Certificate remains for a Secure Sockets Layer, which by definition, is the standard security innovation for setting up an encrypted (encoded connect) between a web server and a program. A web server is what an organization or business interfaces with to introduce their site on the web, and an internet browser is the thing that clients use to associate with pages on their telephones or PCs.

To put in straightforward terms, a web server and internet browser fill in as a group to associate your client’s PC to your organization’s site. An SSL Certificate makes it harder for terrible on-screen characters to disturb the data that goes between the program and server. This implies your clients can be sure that any individual data they give is securely conveyed and the data they get from the site isn’t altered.

Why is encryption critical?

Without an SSL Certificate scrambling the information going between your business and your clients, the two gatherings could be in danger. Since littler organizations are probably not going to have a full group chipping away at site security, they are more defenseless against assaults from awful performing artists.

A straightforward SSL Certificate can secure your business by:

Verifying – Approves that clients are conversing with your servers and not somebody putting on a show to be you.

Holding information uprightness – Shields terrible on-screen characters from changing the interchanges between your clients PC and your servers, or notwithstanding infusing undesirable substance into blog entries.

Encoding information – Keeps the information going amongst you and your clients private so a similar awful performing artist can’t build up a profile about you or your clients.

Boosting Web optimization rank – Google has begun to give a slight lift in the positioning of sites that utilization an SSL Certificate

What a basic SSL Certificate doesn’t do:

Distinguish and expel malware

Distinguish and expel site security vulnerabilities

Oversee web index positioning and notoriety

Give a web application firewall

Secure site against DDoS assaults

Encrypt your site activity now to make the web a better place

An encrypted web is a more secure web, for everybody. This helps keep the web a place where thoughts can stream unreservedly, yet it additionally develops your business, by helping your clients trust you.

With a specific end goal to encourage your business and your clients, Afeeshost.com is putting forth free essential SSL to enable clients to keep their organizations developing. In case you’re an Afeeshost client, watch your inbox for more subtle elements on the most proficient method to turn it on for your record.

Encrypt your site activity now with ssl certificate

Keep your clients and your business safe and secure

It’s decent to know the organizations you are conversing with online are the genuine article and not a pantomime. It has some consolation set up to know you’re protected. An SSL Certificate keeps the information going between your clients and your business safe, and after Google discharges Chrome 68 in July, an encoded site will turn out to be considerably more imperative.

Ensure your clients can trust your business website, agree to accept your email list, and can shop online with certainty. It additionally fills in as a sign that your business thinks about security and thinks about clients.

As days are passing, encryption is becoming a need for every user sitting online. Many tech giants including Google, Apple and Yahoo! are adopting encryption to serve its users security and privacy at its best, but according to Electronic Frontier Foundation (EFF), the high-tech Web security should not be limited to the wealthiest technology firms.

Read more