Looks like restricted keys cannot be used?

[a-ssassi-n]

I am having the same issue. Is there a patch for this?

[shukerullah]

@a-ssassi-n @tbaustin example?

[a-ssassi-n]

Hi Shukerullah,

Thank you for replying.

When we do an HTTP Referrer restriction for our domain (under Application Restriction inside Google Console), we get this error message on the console.

Error: API keys with referer restrictions cannot be used with this API.. Server returned status code REQUEST_DENIED

The package only seems to work when the HTTP restriction is removed.

P.S I also tried wildcard under the allowed domain: *.mywebsite.com/* But no luck.

Is there something we are missing?

Update 1: I did some digging on StackOverflow and found out that for web services we need to use the IP address restriction rather than doing an HTTP restriction. I am still on my dev env, and the CRA is running over localhost:3000. How can I get the IP to restrict and check?

Update 2: So I ran ipconfig on my system that prompted the IPv4 and IPv6 addresses. Adding the "Temporary IPv6" address to the IP Address Restriction list solved the issue. Now I am able to correctly set up the API keys with restrictions.

Cheers!!!

[mnlfischer]

this package is using the wrong google address. Just use https://maps.googleapis.com/ in a regular fetch. Thats it. @tbaustin

[shukerullah]

Updated google address. Thanks @mnlfischer

[mnlfischer]

Hi Shukerullah,

Thank you for replying.

When we do an HTTP Referrer restriction for our domain (under Application Restriction inside Google Console), we get this error message on the console.

Error: API keys with referer restrictions cannot be used with this API.. Server returned status code REQUEST_DENIED

The package only seems to work when the HTTP restriction is removed.

P.S I also tried wildcard under the allowed domain: *.mywebsite.com/* But no luck.

Is there something we are missing?

Update 1: I did some digging on StackOverflow and found out that for web services we need to use the IP address restriction rather than doing an HTTP restriction. I am still on my dev env, and the CRA is running over localhost:3000. How can I get the IP to restrict and check?

Update 2: So I ran ipconfig on my system that prompted the IPv4 and IPv6 addresses. Adding the "Temporary IPv6" address to the IP Address Restriction list solved the issue. Now I am able to correctly set up the API keys with restrictions.

Cheers!!!

You cant use the Google api with http restrictions, it is only working on client side. Google api is only working with IP restrictions from server side. If you want to use http restrictions, use the Google Maps JavaScript API v3.

[rossjcooper]

Unfortunately this still seems to be an issue, @shukerullah will you be able to update the package to fix this? Thanks

[shukerullah]

Unfortunately this still seems to be an issue, @shukerullah will you be able to update the package to fix this? Thanks

@rossjcooper Noted. I will update this soon.

[jthomaschewski]

Any update on this? Or any clue what the underlying issue is?

[robbycp]

If you want to use google maps in react, try to use a package that uses google maps javascript v3. This package use fetch URL API so it will be restricted. Try a package that follow this documentation example. https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingStatusCodes

[karameloso]

@robbycp same problem - any other package recommendation?

[robbycp]

@robbycp same problem - any other package recommendation?

I use react-google-maps to render maps. Then i could access geocoder class in window.google.maps.Geocoder

try {
      if (window.google?.maps) {
        const geocoder = new window.google.maps.Geocoder()
        const response = await geocoder.geocode({
          location: {
            lat: latValue,
            lng: lngValue,
          },
        })
        const result = response.results[0]
        if (result) {
          handleCoordinate(latValue, lngValue, result.formatted_address)
        }
      }
    } catch (error) {
      console.error(error)
    }

[shukerullah]

Hello,

Thank you for bringing this to our attention. The latest version of the package now uses https://maps.googleapis.com/. Could you please test this version and confirm if the issue is resolved?

Feel free to reopen the issue if needed or if you have further feedback.

[ShubhamSharma3901]

This isn't fixed yet

[aashishvanand]

If we set an application restriction for the API key in the GCP console, it doesn't work. Getting the following error message

Google is expecting a referer param in the payload. which is missing, I guess https://cloud.google.com/docs/authentication/api-keys?authuser=1&hl=en#http

[KevinWhalen]

https://stackoverflow.com/a/52930354/3003133

Server-side, static addresses

https://developers.google.com/maps/documentation/geocoding/overview#why-use-the-geocoding-api

"This service is not designed to respond directly to user input. To do dynamic geocoding, for example, in a user interface, see the Maps JavaScript API client geocoder."

Client-side, dynamic addresses

https://developers.google.com/maps/documentation/javascript/geocoding

"This page describes the client-side service available with the Maps JavaScript API. If you want to work with Google Maps web services on your server, take a look at the Node.js Client for Google Maps Services. The page at that link also introduces the Java Client, Python Client and Go Client for Google Maps Services."

[nicitaacom]

That helped me

I just created new API key

IDK what its error is I even disabled restriction for key and anyway get error like

Error: Geocoding request failed: Geocoding failed: API keys with referer restrictions cannot be used with this API.. Server returned status code REQUEST_DENIED.

[ddehueck]

@KevinWhalen's answer is correct. Others may be interested in using another library like: https://github.com/visgl/react-google-maps?tab=readme-ov-file#using-other-libraries-of-the-maps-javascript-api

const geocodingLib = useMapsLibrary("geocoding");
const geocoder = useMemo(() => geocodingLib && new geocodingLib.Geocoder(), [geocodingLib]);

geocoder?.geocode({
    location: new google.maps.LatLng(lat, lng),
}).then((geoCoderResponse) => {
    const  address = geoCoderResponse.results[0].formatted_address;
    console.log(address)
})