如何避免Google Maps JavaScript API出现问题？

Question

I am using the Google Maps JavaScript API in combination with an api key. This works great for some hours or days, but after a specific intervall I get the following 403 error and the map is gone:

I don't know where the problem is because I didn't have reached the 25.000 requests per day yet. If I reset the api key and reload the page the map is loading correctly again, but I don't wanna reset the api key again and again.

As you can see I am using a custom map, but I don't think that the code is the problem, but here is the code:

(function(window, google){

    var infoWindow = null;

    function init() {
        var map;
        var mapOptions = {
            zoom: 12,
            scrollwheel: false,
            center: new google.maps.LatLng(
                51.050409,
                13.737262
            ),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(
            document.getElementById('map'),
            mapOptions
        );
        setMarkers(map, locations);
        infoWindow = new google.maps.InfoWindow({
            content: "holding..."
        });
    }

    function setMarkers(map, locations) {
        var i, icon, marker, contentString;
        for (i = 0; i < locations.length; i++) {
            icon = '../Images/icn-marker.png';
            contentString = '<div><b>' + locations[i][0] + '</b><br>' + locations[i][1] + '<br>' + locations[i][4] + '</div>';
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][2], locations[i][3]),
                map: map,
                title: locations[i][0],
                icon: icon,
                html: contentString
            });
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(this.html);
                infoWindow.open(map, this);
            });
        }
    }

    google.maps.event.addDomListener(window, 'load', init);

})(window, google);

Any my script include looks like the following:

<script src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY"></script>
<script src="http://example.de/example/map.js"></script>

Hope you can help, because I dont' know where the problem is.

Answer 1

The 403 error response indicate that your API key is not valid or was not included in the request. Please enxure that you have included the entire key and that you have enabled the API for this key.

Also, check your usage limit , if you exceed the usage limits or otherwise abuse the service, the web service will return a specific error message. If you continue to exceed limits, your access to the web service may be blocked. It is also possible to receive 403 Forbidden responses.

The problem can be address by combining two approaches:

• Lowering usage, by optimizing applications to use the web services more efficiently.
• Increasing usage limits, when possible, by purchasing additional allowance for your Google Maps API for Work license.

Note: When requests fail, you should ensure that you retry requests with exponential backoff. For example, if a request fails once, retry after a second, if it fails again, retry after two seconds, then four seconds, and so on. This ensures that broken requests or wide scale failures do not flood Google's servers, as many clients try to retry requests very quickly.

Here's a related SO ticket encountered 403 error response: Google static map API getting 403 forbidden when loading from img tag