Marker Annotation

VMarkerAnnotation renders MapKit's classic teardrop pin. Pass a [lat, lng] tuple plus an annotation object for the title, subtitle, color, and an optional glyph. Click a pin to see its callout.

MarkerAnnotation.vue

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

<template>
  <VMap :access-token="token">
    <VMarkerAnnotation
      :coordinates="[37.7749, -122.4194]"
      :annotation="{
        title: 'San Francisco',
        subtitle: 'City Hall',
        color: '#0a84ff',
        glyphText: '★',
      }"
    />
  </VMap>
</template>