While working on a clients website, I came through this error saying:
Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys NA.j @ util.js:210 (anonymous) @ js?ver=4.7.3:133 (anonymous) @ js?ver=4.7.3:41 (anonymous) @ js?ver=4.7.3:37 (anonymous) @ js?ver=4.7.3:41 (anonymous) @ js?ver=4.7.3:105 (anonymous) @ js?ver=4.7.3:37 (anonymous) @ js?ver=4.7.3:105 (anonymous) @ js?ver=4.7.3:37 (anonymous) @ js?ver=4.7.3:105 (anonymous) @ js?ver=4.7.3:37 (anonymous) @ js?ver=4.7.3:105 Wb @ js?ver=4.7.3:40 Vb.cb @ js?ver=4.7.3:105 (anonymous) @ common.js:1 js?ver=4.7.3:33 Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error _.jb @ js?ver=4.7.3:33 (anonymous) @ common.js:50 (anonymous) @ common.js:189 c @ common.js:45 (anonymous) @ AuthenticationService.Authenticate?1shttp%3A%2F%2Fdiritalents.com%2Fcontact-us%2F%23wpcf7-f40-p41-o…:1
Note that we have both google maps api warning and google maps api error. Apparently, the warning the the first issue, which leads to the error in next line, as the warning is about the missing api key via noapikeys, and the same api key was used to do something, which resulted in the next missingkeymaperror.
Solution to Google Maps API Warning or Error
My scenario here was that I was using Pitch WordPress theme and was receiving this error.
The error came out when we tried to submit the contact form on contact page (built using contactform7 plugin). However, the plugin instead of submitting the form via ajax, reloaded the page. Quite unlike the expected behavior for the contact form.
Upon digging in and trying to debug and find the error, the above shown error was seen (the image and the error block above it).
How was it solved? Well that’s simple. The theme settings needed Google Maps Api key.
Google now requires us to give api key for various things which it didn’t require earlier.
In this situation, the api key had to be added at:
http://domain.com/wp-admin/admin.php?page=qode_pitch_theme_menu
Find the Google Maps section on this settings page (image below).
Now to acquire the google maps api to be entered here, go to:
https://developers.google.com/maps/documentation/javascript/get-api-key?utm_source=geoblog&utm_medium=social&utm_campaign=2016-geo-na-website-gmedia-blogs-us-blogPost&utm_content=TBC%3Cbr%20/%3E
On this page, scroll a bit down and find:
Upon clicking on Get A Key button, it will open a page, asking you to get key for existing apps or create new. If it’s new site or app, then click on new and enter the name for new app, and it will give you the api key for it. Sweet and simple.
Enter this new key in theme settings as shown above and save the settings.
Clear the cache and refresh your page and voila! No more google maps api error and contact form 7 ajax will work fine too now!
Let me know if you’re still facing any issue related to this post.