billing information that it is enabled
I have enabled billing, but after using for a very few time and making very few requests I am getting:
You have exceeded your daily request quota for this API. If you did not set a custom daily request quota, verify your project has an active billing account: http://g.co/dev/maps-no-account For more information on usage limits and the Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/usage"
[react-places-autocomplete]: error happened when fetching data from Google Maps API.
Please check the docs here (https://developers.google.com/maps/documentation/javascript/places#place_details_responses)
Status: OVER_QUERY_LIMIT
Can someone please help to how to get rid of this problem?
I am using React js and my script code in public/index.html is
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE&libraries=places"></script>
actually in the place of MY_KEY_HERE i am using the key i have generated and it worked super fine for 1 hr and later it is showing this error
and also my code for selecting places is
import React, { Component } from 'react';
import Toper3 from './Toper3';
import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBInput,MDBCard, MDBCardBody } from 'mdbreact';
import { Fragment } from 'react';
import axios from 'axios';
import PlacesAutocomplete, { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete';
import TimeField from 'react-simple-timefield';
const isObject = val => {
return typeof val === 'object' && val !== null;
};
const classnames = (...args) => {
const classes = [];
args.forEach(arg => {
if (typeof arg === 'string') {
classes.push(arg);
} else if (isObject(arg)) {
Object.keys(arg).forEach(key => {
if (arg[key]) {
classes.push(key);
}
});
} else {
throw new Error(
'`classnames` only accepts string or object as arguments'
);
}
});
return classes.join(' ');
};
class FindaRide extends Component {
constructor(props) {
super(props);
this.state = {
info : [],
source: '',
post_address_obj: {},
errorMessage: '',
latitude: null,
longitude: null,
isGeocoding: false,
d_post_address_obj: {},
d_errorMessage: '',
d_latitude: null,
d_longitude: null,
d_isGeocoding: false,
destination : ''
}
}
handleSourceAddressChange = address => {
// console.log(address);
this.setState({
source: address,
latitude: null,
longitude: null,
errorMessage: ""
});
};
handleDestinationAddressChange = address => {
// console.log(address);
this.setState({
destination: address,
d_latitude: null,
d_longitude: null,
d_errorMessage: ""
});
};
refine(){
alert("refinement");
const result = this.state.info.filter(word => word.source ==this.state.source&&word.destination==this.state.destination);
console.log("filtered "+result.length);
this.props.history.push({pathname : `findlist`, state : {details : this.props.location.state.details,info : this.state.info}});
}
handleSubmit = (event) => {
event.preventDefault();
axios.get('http://127.0.0.1:8000/api2/')
.then(res=>{
this.setState({
info : res.data
});
//console.log(res.data);
this.refine();
})
}
render() {
return (
<div>
<Toper3 >{this.props.location.state.details.firstname} {this.props.location.state.details.lastname}</Toper3>
<br/>
<MDBContainer>
<MDBRow>
<MDBCol md="6" className="mb-4" > {/*style={{ maxWidth: "22rem" }}*/}
<MDBCard color="indigo" text="white" className="text-center" align="center" style={{ maxWidth: "22rem" }}>
<MDBCardBody align = "center" >
FILL IN THE DETAILS TO FIND A RIDE
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
<form onSubmit={this.handleSubmit}>
<MDBRow>
<MDBCol md="6" className="mb-4">
<label> Source </label>
<PlacesAutocomplete
value={this.state.source}
onChange={this.handleSourceAddressChange}
>
{({ getInputProps, suggestions, getSuggestionItemProps }) => {
return (
<div className="Demo__search-bar-container">
<div className="Demo__search-input-container">
<input
{...getInputProps({
placeholder: "Tag the location",
className: "Demo__search-input"
})}
/>
{this.state.source.length > 0 && (
<button
className="Demo__clear-button"
onClick={this.handleCloseClick}
>
x
</button>
)}
</div>
{suggestions.length > 0 && (
<div className="Demo__autocomplete-container">
{suggestions.map(suggestion => {
const className = classnames("Demo__suggestion-item", {
"Demo__suggestion-item--active": suggestion.active
});
return (
/* eslint-disable react/jsx-key */
<div
{...getSuggestionItemProps(suggestion, {
className
})}
>
<strong>
{suggestion.formattedSuggestion.mainText}
</strong>{" "}
<small>
{suggestion.formattedSuggestion.secondaryText}
</small>
</div>
);
/* eslint-enable react/jsx-key */
})}
<div className="Demo__dropdown-footer">
<div>
<img
src="http://files.hostgator.co.in/hostgator254362/image/powered-by-google.png"
className="Demo__dropdown-footer-image"
/>
</div>
</div>
</div>
)}
</div>
);
}}
</PlacesAutocomplete>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="6" className="mb-4">
<MDBInput
label="SOURCE"
group
type="text"
validate
error="wrong"
success="right"
value = {this.state.source}
style={{ maxWidth: "18rem" }}
//icon="envelope"
required
/>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="6" className="mb-4">
<label> Destination </label>
<PlacesAutocomplete
value={this.state.destination}
onChange={this.handleDestinationAddressChange}
>
{({ getInputProps, suggestions, getSuggestionItemProps }) => {
return (
<div className="Demo__search-bar-container">
<div className="Demo__search-input-container">
<input
{...getInputProps({
placeholder: "Tag the location",
className: "Demo__search-input"
})}
/>
{this.state.destination.length > 0 && (
<button
className="Demo__clear-button"
onClick={this.handleCloseClick}
>
x
</button>
)}
</div>
{suggestions.length > 0 && (
<div className="Demo__autocomplete-container">
{suggestions.map(suggestion => {
const className = classnames("Demo__suggestion-item", {
"Demo__suggestion-item--active": suggestion.active
});
return (
/* eslint-disable react/jsx-key */
<div
{...getSuggestionItemProps(suggestion, {
className
})}
>
<strong>
{suggestion.formattedSuggestion.mainText}
</strong>{" "}
<small>
{suggestion.formattedSuggestion.secondaryText}
</small>
</div>
);
/* eslint-enable react/jsx-key */
})}
<div className="Demo__dropdown-footer">
<div>
<img
src="http://files.hostgator.co.in/hostgator254362/image/powered-by-google.png"
className="Demo__dropdown-footer-image"
/>
</div>
</div>
</div>
)}
</div>
);
}}
</PlacesAutocomplete>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="6" className="mb-4">
<MDBInput
label="DESTINATION"
group
type="text"
validate
error="wrong"
success="right"
value = {this.state.destination}
style={{ maxWidth: "18rem" }}
//icon="envelope"
required
/>
</MDBCol>
</MDBRow>
<br/>
<br/>
<MDBRow>
<MDBCol md="4" className="mb-4">
<label> DateofJourney </label>
<input type = "date" value = {this.state.date} onChange={this.handledatechange} /> {/*(onChange = {event => this.setState({date:event.target.value})} required*/}
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="6" className="mb-4">
<MDBInput
label="anything to say"
group
type="text"
validate
error="wrong"
success="right"
value = {this.state.ats} onChange={this.handleatschange}
style={{ maxWidth: "18rem" }}
icon="envelope"
required
/>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="6" className="mb-4">
<Fragment>
<MDBBtn gradient="blue" type="submit">Submit</MDBBtn>
</Fragment>
</MDBCol>
</MDBRow>
</form>
</MDBContainer>
</div>
);
}
}
export default FindaRide;
Looking at the screenshot you provided, it seems that your Billing Account is based in India.
As you might be aware, Google Maps Platform pay as you go pricing has been launched in India last Nov. 18, 2019. Before this change, your project was subjected to some free limits which may cause OVER_QUERY_LIMIT errors when exceeded.
To fix this issue, you will need to create a new billing account dedicated for Maps APIs only and migrate your maps projects to this new account.
Here's a guide that you could follow to learn how to create a new billing account for Maps. Kindly make sure to select the correct business the billing account will pay for (in this case Google Maps Platform).
Below that is also the section that would help you learn how to migrate your projects.
If you still need help with this issue, I would suggest that you file a support case with us on the GCP Console to open a personalized communication channel as this question does not appear to be about programming.
I hope this helps!