How to use environment variables for Google Maps API key in Sanity config JSON?

Good news - you're actually dealing with a common migration scenario! The google-maps-input.json file was the old Sanity Studio v2 way of configuring the Google Maps plugin, but in Studio v3, you configure plugins directly in your sanity.config.ts (or .js) file where you can use environment variables.

Here's how to set it up properly:

In Studio v3 (Current Version)

In your sanity.config.ts or sanity.config.js file:

import {defineConfig} from 'sanity'
import {googleMapsInput} from '@sanity/google-maps-input'

export default defineConfig({
  // ... your other config
  plugins: [
    googleMapsInput({
      apiKey: process.env.SANITY_STUDIO_GOOGLE_MAPS_API_KEY
    })
  ]
})

Then create a .env.development file in your Studio folder:

SANITY_STUDIO_GOOGLE_MAPS_API_KEY=your-api-key-here

The key thing: all environment variables accessible in Studio must be prefixed with SANITY_STUDIO_. This is how Sanity knows to make them available in the browser-based Studio, as explained in the environment variables documentation.

For Netlify Deployment

In your Netlify site settings:

1. Go to Site settings → Environment variables
2. Add SANITY_STUDIO_GOOGLE_MAPS_API_KEY with your API key value
3. Make sure it's set for the production context

When Netlify builds your Studio, it will automatically inject these environment variables.

Why JSON Files Don't Work

JSON files can't use environment variables because they're static data files, not executable code. This is why the old google-maps-input.json approach was limiting. The v3 configuration approach using sanity.config.ts/js is much more flexible because it's actual JavaScript that runs at build time and can access process.env.

Security Note

As mentioned in the environment variables documentation, anything prefixed with SANITY_STUDIO_ will be exposed in your built Studio bundle (since it runs in the browser). For Google Maps API keys, this is expected - just make sure to restrict the key in Google Cloud Console to only allow requests from your Studio domains.

You can find more details about configuring the plugin on the official Google Maps input plugin page.