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

Standard

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.

  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.
    Google Maps API Register
  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.
    yourname.com/*
    *.yourname.com/*

    Google Maps Create API Key

  4. Click Create then copy your key that is now shown on the screen.
    Google Maps API Key Done
  5. If you’re using our WordPress plugin, go to Settings  Theme Option 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.
    Google Maps API Key Paste

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.

Advertisements

How to Solve WordPress Could Not Create Directory

Standard

WordPress is an interesting platform to build your website but when you get this kind of errors, you feel like plucking your hair off your head because nothing is happening. I have tried like 10 solutions but never got it right until now.

Am sure you have gotten something like this when trying to update your plugin or upgrading WordPress.

This is the error for the Upgrading of WordPress

Downloading update from http://wordpress.org/wordpress-4.4.zip…

Unpacking the update…

Could not create directory.

Installation Failed

This is the error for the plugin update

  Downloading update from http://downloads.wordpress.org/plugin/your-plugin.0.9.3.1.zip…

  Unpacking the update…

  Could not create directory. /wp-content/upgrade/yourplugin.tmp
 
  Return to Plugins page

SOLUTION:
Step 1:

Plugin: Just change the permission of /public_html/wp-content and /public_html/wp-content/plugins to 775. If the update succeed just revert it back to its default permission.

Upgrading: Just change the permission of /public_html/wp-content and /public_html/wp-content/upgrade to 775. If the upgrade succeed just revert it back to its default permission.


chmod 775 /var/www/html/wordpress/wp-content/

chmod 775 /var/www/html/wordpress/wp-content/plugins

chmod 775 /var/www/html/wordpress/wp-content/upgrade

Step 2:

Add the proper group permissions most likely to the same that Apache is running under.

ps aux | grep apache 

You will see the Apache user group on the left.

See my example of how I did it:

Screen Shot 2015-12-15 at 11.37.13 AM

Step 3:

Now change your WordPress folder to the same user group, you can do this in a parent folder or sub folder but for sanity it usually best for parent folder, use -R to recursively do it.

chown -R apache:apache /path/to/wp-root-folder
  • To login on windows use Putty
  • Enter your hostname and port
  • Choose connection type depending on server settings
  • Click open

If you try to chown and get denied you will need root privileges , type sudo su and your password.

Now try updating the plugin or Upgrading WordPress.

Awesome!!! Now we have solved that issue.

Solution by Wyck

 

If it helped you out, please don’t forget to like and share 🙂