Skip to content

wobsoriano/vue-use-places-autocomplete

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

vue-use-places-autocomplete

πŸ“ Vue composable for Google Maps Places Autocomplete.

Installation

npm install vue-use-places-autocomplete

Usage

<!-- Load the library using the script tag -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<script setup>
import { ref } from 'vue'
import { usePlacesAutocomplete } from 'vue-use-places-autocomplete'

const query = ref('')
const { suggestions } = usePlacesAutocomplete(query, {
  debounce: 500,
  minLengthAutocomplete: 3
})
</script>

<template>
  <input type="text" v-model="query" placeholder="Search a place..." />
  <ul>
    <li v-for="item in suggestions" :key="item.place_id">{{ item.description }}</li>
  </ul>
</template>

API

const {
  suggestions,
  loading,
  sessionToken,
  refreshSessionToken
} = usePlacesAutocomplete(query, options)

Options

Key Type Default Description
apiKey string "" If this parameter is passed, the component will inject the Google Maps JavaScript API using this apiKey. So there's no need to manually add the script tag to your HTML document.
apiOptions object {} Object to configure the google script to inject.
autocompletionRequest object {} Autocompletion request object to add restrictions to the search.
debounce number 300 The number of milliseconds to delay before making a call to Google Maps API.
minLengthAutocomplete number 0 Defines a minimum number of characters needed on the input in order to make requests to the Google's API.
onLoadFailed function console.error Function to be called when the injection of the Google Maps JavaScript API fails due to network error.
withSessionToken boolean false If this is set to true, the composable will handle changing the sessionToken on every session. To learn more about how this works refer to Google Places Session Token docs.

Return object

Key Type Default Description
suggestions array [] Contains the autocomplete predictions.
loading boolean false Indicates the status of a request is pending or has completed.
sessionToken string | undefined undefined Current sessionToken being used.
refreshSessionToken function - This function allows you to refresh the sessionToken being used.

Utilities

geocodeByPlaceId

This function allows to get result by a place id using Google Maps Geocoder.

import { geocodeByPlaceId } from 'vue-use-places-autocomplete'

const results = await geocodeByPlaceId('ChIJk6_7UFmdqTMRgFAxl4KEnUQ')

geocodeByAddress

This function allows to get results by an address using Google Maps Geocoder.

import { getGeocode } from 'vue-use-places-autocomplete'

const results = await geocodeByAddress('Manila, Philippines')

geocodeByLatLng

This function allows to get results by it's coordinates (latitude and longitude) using Google Maps Geocoder.

import { geocodeByLatLng } from 'vue-use-places-autocomplete'

const results = await geocodeByLatLng({ lat: 14.5995, lng: -120.9842 })

getLatLng

This functions allows to get the latitude and longitude of a geocoder result.

import { geocodeByAddress, getLatLng } from 'vue-use-places-autocomplete'

const results = await geocodeByAddress('Manila, Philippines')
const { lat, lng } = await getLatLng(results[0])

Credits

License

MIT