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:http://googlegeodevelopers.blogspot.com.au/2016/06/building-for-scale-updates-to-google.html

“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 😉

Update(nov-2016): you no longer need to edit any files, simple get your API key, navigate to customize > Google Maps API and paste it here. Give it about 10 minutes & you are done

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.

Update: if you are using the real estate theme latest version, you can stop here. simply copy the API code above and past it in the customizer > google maps api section

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', '//maps.googleapis.com/maps/api/js?sensor=false' );

Now replace it with the code below

wp_enqueue_script( 'google-maps', '//maps.googleapis.com/maps/api/js?key=YOUR-KEY-GOES-HERE&sensor=false' );

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.