Search code examples
javascriptreactjsgoogle-mapsgoogle-maps-api-3

"You have exceeded your request quota for this API" in Google Map

I am currently using react-google-map for getting Google Map to run in my React project, here is my Map component:

import React from 'react'
import { compose, withProps, lifecycle } from 'recompose'
import { withScriptjs, withGoogleMap, GoogleMap } from 'react-google-maps'

import MapStyle from  '../../../api/mapStyle'

const Map = ({ children }) => {

  return (

    <GoogleMap
      defaultZoom={15}
      defaultCenter={{ lat: 35.6840299, lng: 51.3861187 }}
    >
      {children}
    </GoogleMap>
  )
}

export default compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div className='map' style={{ height: `100vh` }} />,
    mapElement: <div style={{ height: `100%` }} />
  }),
  withScriptjs,
  withGoogleMap,
)(Map)

As you can see this is as what react-google-map DOC says , nothing so fancy here!

Yesterday I just started to build map, and as normal I went to my Google console and got a key, then I put it on MY_KEY_HERE section of link , and it worked fine until this morning, today i am struggling with:

You have exceeded your request quota for this API

Not:

You have exceeded your daily request quota for this API

as below:

enter image description here

I searched Google and I found this and this and this and many many others, but I could not find any proper answer to this problem.

What did I try?

  1. I created a couple of other keys in my console to remove this problem , but it is not solved, I got the same You have exceeded your request quota for this API error
  2. I used another account of mine on Google to resolve this issue and I just logged in and went to console platform and again generated a key, but I still getting that error?
  3. even by trying it in codeSandBox.io, I still got the same error

I'm really confused about this issue, how should I solve it?

Solution

  • Edit: The link below seems to be dead. You can read Google Maps Platform Billing's documentation here https://developers.google.com/maps/billing-and-pricing/billing#billing-in-the-console

    Check if your project has a billing account associated to it. You can use this Google tool: https://mapsplatformtransition.withgoogle.com/

    "This project does not have a billing account. You will need to add billing information for this project to continue to use Google Maps Platform. The first $200 of monthly usage is free. You only pay for what you use. You can review rates and access your spending any time in your Google Cloud Platform Console, where you can also set daily quotas to protect against unexpected increases. You can also set billing alerts to receive email notifications when charges reach a preset threshold determined by you."

    It will list all your projects using Google Maps and tell you to "Add Billing" if the project status is not "in good shape".