---
title: "Geopoint"
description: "This article explains what the geopoint field is and how to configure it."
meta_title: "Geopoint"
category: "fields"
audience: developers
lastUpdated: "2025-11-06T01:07:50.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

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