Rendering the GeoPoint field

Prismic no longer recommends the gatsby-source-prismic-graphql plugin

With recent changes to Gatsby, Prismic no longer recommends the gatsby-source-prismic-graphql plugin that this documentation uses. Read more about the future of Prismic and Gatsby. We highly recommend using the gatsby-source-prismic instead. The documentation for this plugin can be found in the plugin's github README.

We will leave this documentation here for now, but will change it in the future when we determine the best approach for Prismic & Gatsby.

The GeoPoint field is used for geolocation coordinates. It works by adding coordinates or by pasting a Google Maps URL. You can read more about the GeoPoint field here.

Accessing the longitude and latitude

Here is an example of how to retrieve the coordinates for a GeoPoint field. In this case, the GeoPoint field has the API ID of location. This assumes that you have saved the document object in a variable named document as shown in the Retrieve the document object page.

const lat = document.location.latitude   // latitude
const long = document.location.longitude // longitude

A full example

Now let's take a look at a full page component example. Here you can see how the GeoPoint field is included in the query, retrieved, and templated on the page. Again in this example the API ID of the GeoPoint field we're retrieving is location.

import React from 'react'
import { graphql } from 'gatsby'

const Page = ({ data }) => {
  const prismicContent = data.prismic.allPages.edges[0]
  if (!prismicContent) return null
  const document = doc.node

  return (
      <p>Latitude: {document.location.latitude}</p>
      <p>Longitude: {document.location.longitude}</p>

export const query = graphql`
query {
  prismic {
    allPages(uid: "location-page") {
      edges {
        node {

export default Page