---
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-09-17T06:13:24.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:**

  1. **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.

  2. **Pull your changes**

     When you're done modeling in the Type Builder, pull your changes into your local project with the Prismic CLI.

     ```sh
     npx prismic pull
     ```

* **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
     ```

# 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
  }
}
```