Last weekend I was perplexed to find that Google Maps had apparently broken, but only when running my site locally – the production site seemed unaffected. The map would load and then after a couple of seconds it would be replaced by a ‘Sorry! Something went wrong.’ message. The JavaScript console showed a ‘Google Maps API warning: NoApiKeys’ warning, even though I was using my existing key.

I was able to fix the problem by following the instructions here to generate a new API key.

NOTES

1. Went to https://developers.google.com/maps/documentation/javascript/get-api-key and clicked the ‘Get a Key’ button.
2. When I got to the ‘Create browser API key’ section, it was displaying a warning ‘You don’t have permission to create an API key’. The solution is explained here – I needed to create credentials (via the Credentials link in the sidebar).
3. To limit the accepted HTTP referrers to localhost, I needed to use the pattern localhost/* (http://stackoverflow.com/a/30043097).