Place Annotation

VPlaceAnnotation builds an annotation from a real MapKit Place: the rich result type returned by search, geocoding, and POI queries. Search below and the results drop onto the map as place pins.

PlaceAnnotation.vue

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

  const { search } = useSearch();
  const results = shallowRef([]);

  async function runSearch() {
    const response = await search('coffee');
    results.value = response.places;
  }
</script>

<template>
  <VMap :access-token="token">
    <VPlaceAnnotation
      v-for="place in results"
      :key="place.id"
      :place="place"
      :annotation="{ title: place.name }"
    />
  </VMap>
</template>