Google Maps API key restrictions URL
Hey guys, I am building a wholesale map for my client. I created a frontend embedded app so they can add their wholesalers. They have added URL restrictions so have added the website URL. However because we're using the Geocoding in the app (well in the create.js) I am wondering what URL they would add so we can use the API there?
Would it be : https://admin.shopify.com/store/(storeName)/apps/(appName)*
I have asked him to add this but it doesn't seem to work? Any advice would be awesome.
Thank you.
19 Replies
Unknown User•11mo ago
Message Not Public
Sign In & Join Server To View
So in this case: https://wholesalers--development.gadget.app/*
Unknown User•11mo ago
Message Not Public
Sign In & Join Server To View
Ahh yes, thank you! Will let you know, thanks man
@Aurélien (quasar.work) that didn't work unfortunately, not quite sure why...
Not quite sure what to suggest from now, I've added those as well as the shopify admin app url as well.
Anything else you could think of to get this working? @Aurélien (quasar.work)
Unknown User•11mo ago
Message Not Public
Sign In & Join Server To View
Sorry man,
This is the error in the app > [GraphQL] GGT_UNKNOWN: Unable to geocode the provided address: Geocoding API error: REQUEST_DENIED - API keys with referer restrictions cannot be used with this API.
Which suggests our added URL isn't working for this. Before we added the URL restrictions this was all working, which suggest our code is okay.
I'll include the code here if that's okay as its not too long :
export async function geocodeAddress(address) {
const { default: fetch } = await import('node-fetch'); // Dynamic import
const apiKey = process.env.GOOGLE_MAPS_API_KEY;
if (!apiKey) {
throw new Error('Google Maps API key is not defined in environment variables.');
}
const encodedAddress = encodeURIComponent(address);
const url =
https://maps.googleapis.com/maps/api/geocode/json?address=${encodedAddress}&key=${apiKey};
const response = await fetch(url);
if (!response.ok) {
throw new Error(Geocoding API request failed with status ${response.status});
}
const data = await response.json();
if (data.status !== 'OK') {
throw new Error(Geocoding API error: ${data.status} - ${data.error_message || 'No error message provided.'});
}
const location = data.results[0].geometry.location;
return {
latitude: location.lat,
longitude: location.lng,
};
}Unknown User•11mo ago
Message Not Public
Sign In & Join Server To View
Here's the geocoding API docs : https://developers.google.com/maps/documentation/javascript/geocoding
Here's the URL restricting docs: https://developers.google.com/maps/api-security-best-practices?hl=en
Is that what you meant? 😄
Google for Developers
Geocoding Service | Maps JavaScript API | Google for Developers
Google for Developers
Google Maps Platform security guidance | Google for Developers
Learn how to secure and manage your Google Maps Platform API keys.
Unknown User•11mo ago
Message Not Public
Sign In & Join Server To View
Ahh I see, so we have to switch it to IP restrictions instead of HTTPs. How do we find the gadget project server IP address? Thanks for all your help also!!
Here are the docs to the whitelisted IP: https://docs.gadget.dev/guides/faq#if-i-require-ip-whitelisting-is-gadget-able-to-provide-me-with-an-ip-address
Faq - Developer Docs - Gadget
Gadget Docs
Sorry just coming back round to this one. So I've got the client to add the outbound IP to the IP restrictions, however we still get an error of :
Unable to geocode the provided address: Geocoding API error: REQUEST_DENIED - This IP, site or mobile application is not authorized to use this API key. Request received from IP address (API key that isn't the same as the outbout IP), with empty referer
So yeah it seems the IP its sending from isn't the same as the one listed in the docs. Why could this be?
Speaking with the team, the IP address should be up to date. I'm talking to them now to see if there's something we're missing
Thanks man, appreciate it as always
What IP do you see us connecting from?
Would you be comfortable sending the IP to me privately?
Yeah sure!
hey @AlexFPV , i think that to unblock yourself, you can just allow every IP to connect like so:
Antoine shared the IP that you were seeing, and it looks like an ipv6 IP, which is very strange as gadget doesn't have an IPv6 outbound IP provisioned, just ipv4, which is the one you see in the docs. so, i have to do some digging to figure out whats up with that, i think it might be that because Gadget runs in GCP and Google Maps is a google product, your requests are taking a private route to google maps instead of going over the internet, but im not really sure!
since your API key is still a secret key, i think its not a terrible security posture to allow connections from anywhere with the key, but its not ideal so i will look into how to limit it further!
Ahh right, thanks for looking into it! Yeah I guess we can go that route for now and get all the wholesalers added then maybe put a restriction on it again just for security sake! Thanks for looking at it further man, appreiciate all the help on this 😄