# @sanity/google-maps-input

> Sanity plugin providing input handlers for geo-related input types using Google Maps

Latest version **6.1.17** (published 2026-10-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sanity/google-maps-input
pnpm add @sanity/google-maps-input
yarn add @sanity/google-maps-input
bun add @sanity/google-maps-input
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 6.1.17 |
| Published | 2026-10-13 |
| First published | 2016-09-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | >=20.19 <22 \|\| >=22.12 |
| Dependencies | 3 |
| Unpacked size | 126.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Author | Sanity.io <hello@sanity.io> |
| Maintainers | sanity-svc.npm, sanity-io |
| Keywords | cms, content, google-maps-input, headless, realtime, sanity, sanity-plugin |

## Links

- npm: https://www.npmjs.com/package/@sanity/google-maps-input
- Repository: https://github.com/sanity-io/plugins
- Homepage: https://github.com/sanity-io/plugins/tree/main/plugins/@sanity/google-maps-input#readme
- Issues: https://github.com/sanity-io/plugins/issues
- npm.io page: https://npm.io/package/@sanity/google-maps-input

## Dependencies (3)

- [@sanity/ui](https://npm.io/package/@sanity/ui.md) ^4.4.5
- [@sanity/icons](https://npm.io/package/@sanity/icons.md) ^5.2.3
- [@vis.gl/react-google-maps](https://npm.io/package/@vis.gl/react-google-maps.md) ^1.10.1

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 6.1.17 (latest) — 2026-10-13
- 4.0.0-beta.0 (beta) — 2024-04-05
- 3.0.2-0 (remove-rxjs) — 2023-01-04
- 2.36.0 (studio-v2) — 2022-11-25
- 3.0.0-v3-studio.8 (studio-v3) — 2022-11-04
- 2.34.3-cdr-ga-4.23 (cdr-ga-4) — 2022-10-20
- 2.34.3-cdr-ga-2.19 (cdr-ga-2) — 2022-10-20
- 2.34.3-cdr-ga.20 (cdr-ga) — 2022-10-20
- 2.34.3-cdr-preview.20 (cdr-preview) — 2022-10-20
- 2.34.2-empty-template-cli.0 (empty-template-cli) — 2022-10-13
- 2.34.1-canary.0 (canary) — 2022-10-12
- 2.33.4-shopify.8 (shopify) — 2022-09-22
- 2.33.4-performance-opts.16 (performance-opts) — 2022-09-22
- 2.33.3-edge.8 (edge) — 2022-09-20
- 2.30.7-findability.87 (findability) — 2022-09-20
- … 1143 more at https://npm.io/package/@sanity/google-maps-input/versions

## README

# @sanity/google-maps-input

## What is it?

Plugin for [Sanity Studio](https://www.sanity.io) providing input handlers for geo-related input types using Google Maps.

This plugin will replace the default `geopoint` input component and adds support for `geopointRadius` fields with circle visualization.

![Google maps input](assets/google-maps-input.png)

## Installation

In your studio folder, run:

```
npm install --save @sanity/google-maps-input
```

## Usage

Add it as a plugin in sanity.config.ts (or .js), with a valid [Google Maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key):

> [!WARNING]
> This plugin will replace the default `geopoint` input component.

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

export default defineConfig({
  // ...
  plugins: [
    googleMapsInput({
      apiKey: 'my-api-key',
    }),
  ],
})
```

Ensure that the key has access to:

- Google Maps JavaScript API (for the interactive map)
- Google Static Maps API (for previewing a location)
- Google Places API (New) (for the search feature)

And that the key allows web-access from the Studio URL(s) you are using the plugin in. If the key is missing or rejected, the input renders an inline message explaining what to fix.

### Configuration Options

You can also configure additional options:

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

export default defineConfig({
  // ...
  plugins: [
    googleMapsInput({
      apiKey: 'my-api-key',
      defaultZoom: 8,
      defaultRadiusZoom: 15, // zoom level for radius editing
      defaultLocation: {lat: 59.91273, lng: 10.74609},
      defaultRadius: 1000, // for geopointRadius fields
    }),
  ],
})
```

### Field Types

#### Basic Geopoint Field

![Google maps input](assets/google-maps-input.png)

```typescript
// In your schema
export default {
  name: 'location',
  title: 'Location',
  type: 'geopoint',
}
```

#### Geopoint Radius Field

![Google maps input](assets/google-maps-radius-input.png)

```typescript
// In your schema
export default {
  name: 'serviceArea',
  title: 'Service Area',
  type: 'geopointRadius',
}
```

The `geopointRadius` field type extends the basic geopoint with:

- A radius property (in meters)
- Visual circle overlay on the map
- Editable radius input field
- Draggable circle for radius adjustment

### Store selected Zoom

Optionally persists the selected zoom level on the `geopoint` object.

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

export default defineConfig({
  // ...
  plugins: [
    googleMapsInput({
      apiKey: 'my-api-key',
      saveZoom: true, // default false
    }),
  ],
})
```

Adds a `zoom` property to the `geopoint` object:

```json
{
  "_type": "geopoint",
  "lat": 54.5259614,
  "lng": 15.2551187,
  "zoom": 3
}
```

### Reviewing changes

In the document's **Review changes** pane, `geopoint` and `geopointRadius` values render as a before/after static map preview, matching the look of the built-in image diff.

`geopointRadius` fields get this automatically. Because `geopoint` is a built-in Sanity type, attach the exported `GeopointDiff` component to your `geopoint` fields to opt in:

```typescript
import {GeopointDiff} from '@sanity/google-maps-input'

// In your schema
export default {
  name: 'location',
  title: 'Location',
  type: 'geopoint',
  components: {diff: GeopointDiff},
}
```

## License

MIT-licensed. See LICENSE.

---
_Source: https://npm.io/package/@sanity/google-maps-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._