Custom Annotation

VCustomAnnotation hands you full control: provide an element factory that returns any DOM node and MapKit anchors it to the coordinate. Perfect for price tags, avatars, or live badges.

CustomAnnotation.vue

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

  function buildPriceTag(price) {
    return () => {
      const el = document.createElement('div');
      el.textContent = price;
      el.className = 'price-tag';
      return el;
    };
  }
</script>

<template>
  <VMap :access-token="token">
    <VCustomAnnotation
      :coordinates="[51.5074, -0.1278]"
      :element="buildPriceTag('£420')"
    />
  </VMap>
</template>