41

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?

halfer
  • 19,824
  • 17
  • 99
  • 186
amdev
  • 6,703
  • 6
  • 42
  • 64
  • 2
    What does the link in the error message say? – Tholle Aug 04 '18 at 12:35
  • 1
    it sends me here: https://developers.google.com/maps/documentation/javascript/error-messages?utm_source=maps_js&utm_medium=degraded&utm_campaign=billing#api-key-and-billing-errors – amdev Aug 04 '18 at 12:40
  • Maybe you need to explicitly say to use `v3` of the API. `"https://maps.googleapis.com/maps/api/js?v=3.exp&key=MY_KEY_HERE"` – Tholle Aug 04 '18 at 12:43
  • let me try that .... – amdev Aug 04 '18 at 12:43
  • no , still getting the same error .... both in my project an codesandbox too – amdev Aug 04 '18 at 12:45
  • Sounds like Google asks you create a billing account for your project. Billing account is now mandatory in Google Maps Platform. – xomena Aug 05 '18 at 15:44
  • Having the billing account didn't activate it for an existing api key. I had to generate a new one after the activation. – html_programmer Jul 23 '19 at 20:54
  • I had the same issue. My account said "Your trial has ended but you can still sign up for a free account". I clicked the sign up button and it solved the issue instantly. – Kustom Aug 28 '19 at 21:18
  • I faced the same issue today and finally I solved it by creating another new Google Cloud project, use the existing billing account. Now when I go to Map JS API -> Quota, the `map loads per day` become `unlimited` (in my old project it shows `1`) – truonggiangdao Nov 21 '22 at 07:47

2 Answers2

33

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".

Víctor
  • 850
  • 7
  • 19
  • 1
    I have my billing account added but it is still showing the same error message. What could be the other reason for this issue ? – Manoj Sep 01 '18 at 08:09
  • 1
    Thank you. This was the simple and correct answer. – ReneGAED Oct 22 '18 at 10:07
  • @Manoj Have you solved the problem? – Vijay Singh Chouhan Jan 05 '19 at 06:59
  • 2
    If anyone else comes across this issue, if everything looks fine, i.e. you have billing enabled for the project correctly, but the limit remains at 1 - check you dont have ANY expired payment methods. The issue for me was that a 2nd credit card had expired, even though the primary was valid and i'm still on the free trial anyway. – Ciaran Jan 24 '19 at 16:37
  • The mapsplatformtransition link dies at the authorization step. After trying dozens of times it worked only once. All my projects have billing enabled but the problem remains. Very frustrating, as I am WAY under google pay limits – Alex Mar 21 '19 at 10:27
  • @Ciaran Thanks was facing the same issue. Had two cards of which the secondary one was expired. Just deleting that removed the issue for me. – Siddharth Pant Jun 04 '19 at 17:40
  • I have enabled the billing account but still got the error, any solution? tks – Dat May 13 '22 at 06:41
  • 2
    I faced the same issue today and finally I solved it by creating another new Google Cloud project, use the existing billing account. Now when I go to Map JS API, Quota, the `map loads per day` become `unlimited` (in my old project it shows `1`) – truonggiangdao Nov 21 '22 at 07:45
19

The issue is because you haven't created the billing account for your project.

Without billing account by default good maps API will allow only 1 map load per key per day.

See the error when I try to increase the quota

You can follow these steps to resolve the issue :

  1. Go to Google Cloud Platform Console.
  2. Enable billing account for your project.
  3. Select the project that contains the API you want to review.
  4. From the list of APIs on the Dashboard, click the name of the API.
  5. Near the top of the page, click Quotas or Usage and set the limit according to your usage.
Akarsh Vijayan
  • 271
  • 1
  • 12