Join our next Developer Virtual Meetup – Live Q&A, Project Showcase, Swag raffle, and more 🔥

Configuring Google Maps API key in a Sanity.io project hosted on Netlify

15 replies
Last updated: Jul 27, 2021
I imagine this is config 101 stuff, but I can’t seem to figure it out.
I’m trying to use the Google Maps input, and I don’t want to include my API key directly into google-maps-input.json. I’m hosting on Netlify, and I know where to set up my API key in as a site env variable. But I can’t quite figure out the right syntax to get that env variable into my json file. (For that matter, I’m not quite sure how to do it on my dev json file, either.)
Jul 25, 2021, 4:46 PM
are you hosting the front end app on Netlify, and the studio on Sanity.io , or are you hosting the studio on Netlify also?
Jul 25, 2021, 5:21 PM
Good question. I started from the Sanity-11ty blog starter, and I think that set the studio up at Netlify as well.
Jul 25, 2021, 5:23 PM
You'd have to take some extra steps to host the studio anywhere but Sanity. What happens when you run
sanity deploy
?
Jul 25, 2021, 5:24 PM
Assuming you are hosting the studio on Sanity, when you run
sanity deploy
it will send your env vars up to Sanity with your code as long as you prefix them with
SANITY_STUDIO
. So, for example, in my
.env.production
I have:
SANITY_STUDIO_WHATEVER="123"
Jul 25, 2021, 5:25 PM
Then, in my studio code, I have something like
process.env.SANITY_STUDIO_WHATEVER
Jul 25, 2021, 5:26 PM
Oh, I hadn’t done
sanity deploy
I don’t think that was part of the config instructions with the starter. I’ll try that instead! Thanks.
Jul 25, 2021, 5:27 PM
Okay, I’m back. I’ve set up a sanity.studio for this project and deployed successfully. I’ve included my API key in an
.env.production
, and it appears to include the key as part of the JavaScript bundle on deploy.
But now I’m kind of stuck back at my original question: What’s the syntax for including that key in
google-maps-input.json
?
I’ve tried this, but the key doesn’t appear to be applied, and the map fails to load properly:


{
  "apiKey": "process.env.SANITY_STUDIO_MAP_KEY",
}
(I assume that the key in this instance is literally
process.env.SANITY_STUDIO_MAP_KEY
.)
And I tried this, but the deploy fails with an `Unexpected token p in JSON at position 14`:


{
  "apiKey": process.env.SANITY_STUDIO_MAP_KEY,
}
Is my question clearer now?
Jul 27, 2021, 2:24 AM
Yeah, the API call in the first instance is
<https://maps.googleapis.com/maps/api/js?key=process.env.SANITY_STUDIO_MAP_KEY&librarie[…]ces&callback=___sanity_googleMapsApiCallback&language=en-US>
Jul 27, 2021, 2:32 AM
Ah, I see. The issue I think is that
json
doesn't "run" - you can't interpolate values in it.
Jul 27, 2021, 12:51 PM
I am guessing that you would be able to restrict the use of your key so that only requests made from a particular origin are fulfilled: https://developers.google.com/maps/documentation/javascript/get-api-key ?
Jul 27, 2021, 12:55 PM
Thanks. I guess I didn’t know if the plugin would be able to read the token somehow if I got it in the
json
the right way.
I’ve limited the key to the studio origin and I’ve added it to the
json
. That works, and I guess you’re right that there shouldn’t be a security issue with having that token in the repo (especially since it’s a private repo for now).
Thanks for your time. Have a nice day!
Jul 27, 2021, 1:02 PM
I am guessing if the key is only visible to someone making a request from the studio, and your repo for your studio is private, then you should be ok? But, I do tend to scratch my head and look for the official best way*™* of doing this kind of thing
Jul 27, 2021, 1:12 PM
Right? Knowing the difference between “I must not be doing this the right way” and “I shouldn’t be doing this at all” is tricky, especially when you’re learning. Anyways, thanks again.
Jul 27, 2021, 1:15 PM
Totally - I'm in the same boat, learning as I go. I'm guessing you already Googled your way to this, but this looks helpful: https://cloud.google.com/blog/products/maps-platform/google-maps-platform-best-practices-restricting-api-keys
Jul 27, 2021, 1:24 PM
I’m not sure I’ve read that one, so I’ll check it out. Thanks!
Jul 27, 2021, 1:25 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?