Uso Básico (Recomendado)

Solo necesitas 3 v-model: dirección, latitud y longitud. El evento @change te da todos los datos.

Inicializar desde Coordenadas

Pasa lat y lng iniciales con geocode-on-mount para obtener la dirección automáticamente.

<GoogleGeoInput v-model="address" v-model:lat="lat" v-model:lng="lng" geocode-on-mount />

Personalización

Personaliza país, tipo de lugar, y desactiva funciones que no necesites.

Solo direcciones en Colombia

Control Programático

Usa ref para llamar métodos: clear(), focus(), openMapPicker()

Validación con Rules

Usa rules para validaciones personalizadas. El componente soporta todas las reglas de Vuetify.

Mínimo 10 caracteres y debe tener coordenadas

 :rules="[
   v => !!v || 'La dirección es requerida',
   v => v?.length >= 10 || 'Mínimo 10 caracteres',
   v => lat5 !== null || 'Debe seleccionar una ubicación válida'
 ]"

Documentación de API

Props

Prop	Tipo	Default	Descripción
`v-model`	string	''	Dirección completa
`v-model:lat`	number	null	Latitud
`v-model:lng`	number	null	Longitud
`label`	string	'Dirección'	Etiqueta del campo
`country`	string \| string[]	'co'	Filtro de país (ej: 'co', ['co', 'mx'])
`geocodeOnMount`	boolean	false	Obtiene dirección de lat/lng inicial
`enableMapPicker`	boolean	true	Muestra botón de mapa
`enableCurrentLocation`	boolean	true	Muestra botón de ubicación actual
`required`	boolean	false	Campo obligatorio
`rules`	array	[]	Reglas de validación Vuetify

Eventos

Evento	Datos	Descripción
`@change`	{ address, lat, lng, placeId, source }	Cuando cambia la ubicación (source: 'autocomplete' \| 'map' \| 'geolocation' \| 'geocode' \| 'clear')
`@error`	Error	Cuando ocurre un error

Métodos (vía ref)

Método	Descripción
`clear()`	Limpia el campo y los datos
`focus()`	Enfoca el campo de texto
`openMapPicker()`	Abre el selector de mapa
`geocodeFromCoordinates(lat, lng)`	Obtiene dirección desde coordenadas

Ejemplo de Integración Ultra Simple

<template>
  <v-form>
    <GoogleGeoInput
      v-model="cliente.direccion"
      v-model:lat="cliente.lat"
      v-model:lng="cliente.lng"
      label="Dirección"
      required
      @change="guardarUbicacion"
    />
  </v-form>
</template>

<script setup>
const cliente = reactive({
  direccion: '',
  lat: null,
  lng: null
})

const guardarUbicacion = (data) => {
  // data = { address, lat, lng, placeId, source }
  console.log(`Ubicación desde: ${data.source}`)
  // Guardar en BD...
}
</script>

💡 Nota: El evento @change te da todos los datos necesarios: dirección, coordenadas, placeId y la fuente (autocomplete, map, geolocation).

Google Geo Input

Props

Eventos

Métodos (vía ref)

Ejemplo de Integración Ultra Simple