Google Map key with Website application restriction

Question

Google Map key with Website application restriction

214 Views Asked by jrh At 24 September 2023 at 10:07

While applying application restrictions with 'Websites' option in Google cloud console for Map API key, it stopped working even in the allowed web url also.

Followed below steps:

Enabled 2 API from API & Services (Maps JavaScript API, Geocoding API )
Created API Key from Keys & Credentials
Applied application restriction as we want to use this key from my hosted web page.

And We have below javascript snippet to call geocode api from client web app.

const latitude = 24.4564699;
const longitude = 54.4007989;

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var response = xhttp.responseText;
        try {
            const data = JSON.parse(response);
            if (data.status === "OK" && data.results && data.results.length > 0) {
                const formattedAddress = data.results[0].formatted_address;
                console.log("formattedAddress" + formattedAddress);
            } else {
                console.log("Location not found");
            }
        } catch (error) {
            console.log("Error parsing response");
            console.error(error);
        }
    }
};
let url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=<MAP_API_KEY>`;
xhttp.open("GET", url, true);
xhttp.send();

But we are getting request_denied response.

{
   "error_message" : "API keys with referer restrictions cannot be used with this API.",
   "results" : [],
   "status" : "REQUEST_DENIED"
}

Original Q&A

There are 1 best solutions below

**geocodezip** · Accepted Answer · 2023-09-25T04:23:09.847000

The web service which you are using can't use the key with referrer restrictions. Use the geocoder that is part of the JavaScript API v3 with the key with referrer restrictions.

proof of concept fiddle (modified from example in docs)

const latitude = 24.4564699;
const longitude = 54.4007989;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: latitude,
      lng: longitude
    },
    zoom: 8
  });
  const geocoder = new google.maps.Geocoder();
  const infowindow = new google.maps.InfoWindow();
  geocodeLatLng({
    lat: latitude,
    lng: longitude
  }, geocoder, map, infowindow);
}

function geocodeLatLng(latlng, geocoder, map, infowindow) {
  geocoder
    .geocode({
      location: latlng
    })
    .then((response) => {
      if (response.results[0]) {
        console.log(JSON.stringify(response.results[0]));
        if (response.results[0].viewport) {
          map.fitBounds(response.results[0].viewport)
          console.log("viewport")
        } //else if (response.results[0].)
        const marker = new google.maps.Marker({
          position: latlng,
          map: map,
        });

        infowindow.setContent(response.results[0].formatted_address + "<br>" + marker.getPosition().toUrlValue(6));
        infowindow.open(map, marker);
        setTimeout(500, function() {
          map.setCenter(latlng)
        })
      } else {
        window.alert("No results found");
      }
    })
    .catch((e) => window.alert("Geocoder failed due to: " + e));
}

window.initMap = initMap;

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!doctype html>
<html>

<head>
  <title>Reverse Geocoding</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
</head>

<body>
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly" defer></script>
</body>

</html>

Google Map key with Website application restriction

There are 1 best solutions below

Related Questions in GOOGLE-MAPS

Related Questions in GOOGLE-CLOUD-PLATFORM

Related Questions in GOOGLE-MAPS-API-3

Related Questions in GOOGLE-GEOCODER

Trending Questions

Popular # Hahtags

Popular Questions