CODEWITHSUNDEEP
reactjsgoogle-geocoder
user13286
user13286

Reputation: 3075

react-geocode - get address from lat/lng with referrer restricted API?

I am trying to use react-geocode to get a user's address from their lat/lng coordinates, but unfortunately I am getting the error API keys with referrer restrictions cannot be used with this API. Is it possible to get react-geocode to use a different API which does allow referrer restrictions? Otherwise how would I go about doing this, as I cannot remove the referrer restrictions for my API key. Is there a way to reverse geocode lat/lng coordinates using the Google Maps API which I am already using to display my map anyway?

import Geocode from "react-geocode";

Geocode.setApiKey("AIzaSyDsb7F-VyBJn7r4LilYH_lRHBpPfgyUga8");
Geocode.enableDebug();

Geocode.fromLatLng("48.8583701", "2.2922926").then(
  response => {
    const address = response.results[0].formatted_address;
    console.log(address);
  },
  error => {
    console.error(error);
  }
);

CodeSandbox

Upvotes: 5

Views: 17039

Answers (5)

Nicolas Martinez
Nicolas Martinez

Reputation: 1

You have to add Geocoding API to your google maps library, and then you can add to your API restrictions for your API key.

Upvotes: 0

Abhishek Garg
Abhishek Garg

Reputation: 3242

Since you've placed a referrer restriction on your API key, it will be limited to executing on the browser with the web service APIs, including the Geocoding API. It didn't work for me even when manually setting the referrer in the request headers. You can find the other web service APIs on this page: https://developers.google.com/maps/web-services/

Important: If you are using any of the web service APIs with an API key that has referer restictions, your requests will fail with the error message: "API keys cannot have referer restrictions when used with this API." You should switch to using a server restriction.

You'll want to create a separate key to use server-side. You can change your restriction from a browser restriction to a server restriction by using IP addresses to restrict access, instead of browser referrers.

Alternatively, you can continue using a browser key and geocode client-side (JavaScript), then return the result to the backend.

Upvotes: 0

wang eason
wang eason

Reputation: 176

Did you consider using reverse proxy function of web server? for nginx, you can set it the same to the restricted website configured in your google geo api with command proxy_set_header.

However you have to change the GOOGLE_API to your own webserver here in react-geocode .

Upvotes: 0

Basix
Basix

Reputation: 67

It means Google has blocked access from referrer-restricted API key, and it's very unlikely that Google has two versions of same API with different API restrictions, so you can't use Geocoding API with your restricted key. But you can create other API key with other restrictions applied, i.e. IP restriction.

Upvotes: 0

konrad_pe
konrad_pe

Reputation: 1190

If you want to switch to Google Maps, their (reverse) geocoding is pretty straight forward. Obviously you want to get a Google Maps API Key (get it here) to write a GET request:

 https://maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452&key=YOUR_API_KEY

Parsing the results should be easy. :)

Sources:

  1. https://developers.google.com/maps/documentation/geocoding/intro#ReverseGeocoding
  2. https://developers.google.com/maps/documentation/geocoding/intro#reverse-example

Upvotes: 2

Related Questions