Templating the GeoPoint field

The GeoPoint field is used for geolocation coordinates. It works by adding coordinates or by pasting a Google Maps URL.

Before Reading

This page assumes that you have already included the @prismicio/vue plugin in your project or that you are using the Prismic Vue.js starter. Check out the Integrating with existing project page to learn how to get setup.

Usage

Here's an example of how to integrate a GeoPoint field into your template.
In this example, the GeoPoint field has the API ID of location.

Copy

<template>
  <div>
    <p>Location: {{ fields.location.latitude }}, {{ fields.location.longitude }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fields: {
        location: {
          latitude: null,
          longitude: null
        }
      }
    };
  },
  methods: {
    // This is an example query, the important part is above.
    getContent () {
      this.$prismic.client.getSingle('example')
        .then((document) => {
          this.fields.location = document.data.location;
        })
    }
  },
  created () {
    this.getContent();
  }
};
</script>