Why does google maps throw "API error: MissingKeyMapError" error more often?

Question

JavaScript

I inserted the map on the site and specified the key api, but with a constant visit, an error pops up "There was a problem loading Google Maps on this page. You can find the details in the JavaScript console." "Google Maps API error: MissingKeyMapError"
As if the api key was not specified at all. But it is loaded from heada.
And the most interesting point is that if you go in every 30 minutes, then the map is loaded. I refresh the page immediately and gives the same error. What to do?
Why does google maps give "API error: MissingKeyMapError" error more often?
the code is fully posted here jsfiddle.net/drytwvL8/448

Answer 1

I advise you to use the service https://www.mapbox.com/
They have the first 50,000 downloads per month for free, while you can cache tiles on your server, using their own means, and thus always use the maps for free.
If you want, you can host OSM on your server and use openlayers.org - then you will have completely independent maps.