---
title: "Geopoint"
description: "This article explains what the geopoint field is and how to configure it."
meta_title: "Geopoint"
category: "fields"
audience: developers
lastUpdated: "2026-04-23T01:17:46.000Z"
---

The geopoint field allows content writers to provide geolocation coordinates or a Google Maps URL. It stores latitude and longitude values that you can use to display locations on maps or perform geolocation calculations.

You can access the latitude and longitude values directly from the field:

**Next.js example:**

```tsx
<span>
  My location is {slice.primary.location.latitude},{" "}
  {slice.primary.location.longitude}.
</span>
```

**Nuxt example:**

```vue-html
<span>
  My location is {{ slice.primary.location.latitude }},
  {{ slice.primary.location.longitude }}.
</span>
```

**SvelteKit example:**

```svelte
<span>
  My location is {slice.primary.location.latitude}, {slice.primary.location
    .longitude}.
</span>
```

# Add a geopoint field to a content model

Geopoint fields are added using the [Type Builder](https://prismic.io/docs/type-builder.md), a tool for building by hand, or the [Prismic CLI](https://prismic.io/docs/cli.md), a tool for AI agents.

* **Type Builder:**

  > **Important**
  >
  > Type Builder is rolling out to new users. If you do not have access, use **Slice Machine**.

  1. **Watch for changes**

     In your local website project, start the Prismic CLI's `sync` command. The CLI will watch for changes in the Type Builder and pull them into your project.

     ```sh
     npx prismic sync --watch
     ```

     > **Tip**: You can pull Type Builder changes at any time using `npx prismic
     >   sync`.

  2. **Add a geopoint field**

     In the Type Builder, navigate to the slice, page type, or custom type you want to modify. Add a **geopoint** field and provide the following:

     * **Label**: The label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understandable name.
     * **API ID**: The property name in the Content API. Use a short, snake-cased name.

     You can now close the Prismic CLI `sync` command or add your next field.

* **Prismic CLI:**

  > Your AI agent can perform these steps for you. See [Prismic with AI](https://prismic.io/docs/ai.md) for details.

  1. **Add a geopoint field**

     Use the `prismic field add geopoint` command to add a geopoint field to a slice.

     ```sh
     npx prismic field add geopoint location --to-slice MySlice
     ```

     Use `--to-type` to add the field to a page type or custom type instead.

     ```sh
     npx prismic field add geopoint location --to-type page
     ```

* **Slice Machine:**

  1. **Open Slice Machine**

     In your Prismic project, start Slice Machine to begin editing content models.

     ```sh
     npx start-slicemachine --open
     ```

  2. **Add a geopoint field**

     In Slice Machine, navigate to the slice, page type, or custom type you want to modify. Add a **geopoint** field.

     The **label** determines the label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understandable name.

     The **API ID** determines the property name in the Content API. Use a short, snake-cased name.

# Use geopoint fields

The geopoint field's longitude and latitude values can be read from the field's object.

This example uses a geopoint field named `location`.

**Next.js example:**

```tsx
<span>
  My location is {slice.primary.location.latitude},{" "}
  {slice.primary.location.longitude}.
</span>
```

**Nuxt example:**

```vue-html
<span>
  My location is {{ slice.primary.location.latitude }},
  {{ slice.primary.location.longitude }}.
</span>
```

**SvelteKit example:**

```svelte
<span>
  My location is {slice.primary.location.latitude}, {slice.primary.location
    .longitude}.
</span>
```

# Check if a geopoint field has a value

Use the `isFilled.geoPoint()` helper to check if a geopoint field has a value before using it.

```ts
import { isFilled } from "@prismicio/client";

if (isFilled.geoPoint(slice.primary.my_geopoint_field)) {
  // Do something if `my_geopoint_field` has a value.
}
```

[Learn more about `isFilled`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#isfilled)

# API response

Here is what a geopoint field looks like from the Content API:

```json
{
  "example_geopoint": {
    "latitude": 20.632784250388028,
    "longitude": 0.0019419193267822268
  }
}
```