Annotation Callout

Nest VAnnotationCallout inside any annotation to replace the default bubble with your own markup. It wires itself up as the annotation's callout delegate. Click the pin to open it.

AnnotationCallout.vue

<script setup lang="ts">
  import {
    VMap,
    VMarkerAnnotation,
    VAnnotationCallout,
  } from '@geoql/v-mapkit';
</script>

<template>
  <VMap :access-token="token">
    <VMarkerAnnotation
      :coordinates="[37.3349, -122.009]"
      :annotation="{ title: 'Apple Park', selected: true }"
    >
      <VAnnotationCallout>
        <div class="callout">
          <h3>Apple Park</h3>
          <p>One Apple Park Way, Cupertino</p>
          <a href="#">Directions →</a>
        </div>
      </VAnnotationCallout>
    </VMarkerAnnotation>
  </VMap>
</template>