Defines a set of reusable components designed using vuetify, that has built in interactions with Google's APIs.
In order to use this library, you have to properly configure the following
- vuetify (used to style components)
Register VuetifyGoogleComponents
in your vue.js
application.
import Vue from 'vue'
import VuetifyGoogleComponents from './path/to/vuetify-google-components'
Vue.use(VuetifyGoogleComponents, {
apiKey: process.env.VUE_APP_GOOGLE_API_KEY,
libraries: {
places: true,
// ...
}
})
- Here I assume you provided an environment variable named
VUE_APP_GOOGLE_API_KEY
containing a valid api key provided by google - The libraries field contains a list of boolean matching valid Google SDK libraries required by your application[1].
To learn more, please refers to Google's documentation.
https://developers.google.com/maps/documentation/javascript/libraries
{
lat: number;
lng: number;
}
{
name: string;
location: GLocation;
}
Where location has type GLocation
Input to query addresses from Google Places.
When an option is selected, v-model
is updated with the selected GPlace.
<template>
<google-place-autocomplete v-model="place" />
</template>
To optimize your google API key's quotas, you don't want to call google search api each time the query changes. That's why autocomplete suggestions are lazy loaded according to the following principle.
Display a GPlace object in a Google map.
Optionally centered on a GLocation.
Assuming you want to search places next to Bejing, you could do the following.
<template>
<google-place-autocomplete v-model="place" />
<google-map :place="place" :center="bejing"/>
</template>
<script>
export default{
data(){
return {
place: null,
bejing: {
lat: 39.90419989,
lng: 116.4073963
}
}
}
}
</script>