How to fix Google Maps API error: MissingKeyMapError on WordPress

I’ve had a few complains about my real estate theme , where user’s maps have just disappeared, and thought I’d share with you my solution.  If you are using a theme or plugin that utilizes the google maps api, you must have noticed that it just stopped working and this error pops up on your console Google Maps API error: MissingKeyMapError.

Well, Google just announced some changes to the Google Maps APIs authentication and usage limits:

“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.”

Here’s how to fix this.

Before I continue, if you are not comfortable with editing a few files, it’s better to contact your theme or plugin author and point them here 😉

Step 1: Follow this link and generate a key

Step 2:  Create a new project, and call it whatever you want, generate your key

Step 3: on the left there’s a credentials menu, select that and copy the key you’ve just created

*PS: if this is a new project, navigate to overview > Google Maps API and Enable it.

On your WordPress install, locate the file that contains the google api script, (in either a plugin or a theme). It should look something like this

wp_enqueue_script( 'google-maps', '//' );

Now replace it with the code below

wp_enqueue_script( 'google-maps', '//' );

Obviously replace the “YOUR-KEY-GOES-HERE” with your actual key.

Your api key should be good to go in about 5 minutes.

I updated the real estate plugin that required this key and everything works fine. Although if you have a lot of traffic, you might want to consider getting the premium plan licence because this only allows 25k map loads per day. Another way for plugin/theme developers is to allow users to generate their own key and save it in your theme/plugin’s options page.

Leave a Reply

Your email address will not be published. Required fields are marked *