Geocoding

useGeocoder wraps MapKit's Geocoder service with promise-based geocode (address → coordinates) and reverseGeocode (coordinates → address) methods, plus reactive isGeocoding and error state.

useGeocoder

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

  const { geocode, reverseGeocode, isGeocoding, error } = useGeocoder();

  const place = shallowRef<mapkit.Place | null>(null);

  async function findAddress() {
    const response = await geocode('1 Apple Park Way, Cupertino');
    place.value = response.results[0] ?? null;
  }
</script>

<template>
  <VMap :access-token="token">
    <VPlaceAnnotation v-if="place" :place="place" />
  </VMap>
</template>

Forward Geocoding

geocode turns an address or place name into a list of candidate Place results.

const { results } = await geocode('Golden Gate Bridge', {
  language: 'en',
});
const best = results[0];
console.log(best.coordinate.latitude, best.coordinate.longitude);

• Signature: geocode(query: string, options?: mapkit.GeocoderLookupOptions) => Promise<mapkit.GeocoderResponse>

Reverse Geocoding

reverseGeocode turns a coordinate into a human-readable address.

const coordinate = new mapkit.Coordinate(37.3349, -122.009);
const { results } = await reverseGeocode(coordinate, { language: 'en' });
console.log(results[0]?.formattedAddress);

• Signature: reverseGeocode(coordinate: mapkit.Coordinate, options?) => Promise<mapkit.GeocoderResponse>

Returns

See the live Geocoding example.