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

• react-google-places-autocomplete - React component for Google Places Autocomplete.
• use-places-autocomplete - React hook for Google Maps Places Autocomplete.

License

MIT