Exceeding Google Maps API request limit handler

Question

I'm working on creating handlers for Google Maps's possible errors.

One scenario I wanted to handle was the one where the number of requests made reaches the quota limit for the Google Maps JavaScript API.

When the request limit is reached, an error message covers the map. The error message reads: This page can't load Google Maps correctly.

There is also a message output to the console, You have exceeded your request quota for this API. See https://developers.google.com/maps/documentation/javascript/error-messages?utm_source=maps_js&utm_medium=degraded&utm_campaign=billing#api-key-and-billing-errors

This is all working as expected. Ideally, I would like to redirect the user to another page when the request limit is reached; however, I am totally stumped as to where I would handle this. Below is a code sample I use to load the Google Maps JavaScript API.

import { useState, useEffect } from 'react'
import { Loader } from "@googlemaps/js-api-loader"

function useGoogleMapsApi() {
    const [api, setApi] = useState()
  
    useEffect(() => {
        if ((window as any).google) {
            setApi((window as any).google)
            return
        }
        
        const loader = new Loader({
            apiKey: 'MY_GOOGLE_MAPS_API_KEY',
            version: 'beta',
            libraries: ['places', 'geometry'],
        })
    
        loader
            .load()
            .then(() => {
                setApi((window as any).google)
            })
    }, [])
    
    return api
}

export default useGoogleMapsApi

Answer 1

The rate limit is the amount of API requests that can be performed within a certain time interval. According to Google's API Usage and Billing page , there is a limit of 50 requests per second. If you exceed this amount, subsequent requests to the API will fail with the OVER_DAILY_LIMIT or OVER_QUERY_LIMIT status code and the geocoded data will not be returned.

Google might also block your access to the API if you repeatedly go over the limit.

This is why I would advise you to avoid trying to exceed this request limit, seeing as though it could cause quite the trouble.

Source: What happens when you exceed the Google Geocoding API rate limit?