5

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

user13286
  • 3,027
  • 9
  • 45
  • 100
  • 1
    Use an opensource map. For example you can use [`react-leaflet`](https://react-leaflet.js.org/en/) and [`leaflet-control-geocoder`](https://www.npmjs.com/package/leaflet-control-geocoder) instead of Google Maps – Alexander Vidaurre Arroyo Dec 30 '19 at 23:05
  • Is this duplicate of https://stackoverflow.com/questions/42167695/api-key-browser-api-keys-cannot-have-referer-restrictions-when-used-with-this-ap – Jagdish Idhate Dec 31 '19 at 11:12

5 Answers5

2

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
konrad_pe
  • 1,189
  • 11
  • 26
0

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.

Basix
  • 65
  • 2
  • 11
0

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 .

wang eason
  • 176
  • 4
0

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.

Abhishek Garg
  • 3,092
  • 26
  • 30
0

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

Nicolas Martinez
  • 1
  • 2