Search address and places using Google Maps API
Buy me a cofffe please :)
https://buymeacoff.ee/ridermansb
npm i -S vue-gmaps
And in your main.js
...
// main.js
import VueGmaps from 'vue-gmaps'
Vue.use(VueGmaps, {
key: '<your api here>'
})
Options are:
libraries: ['places'], version: '3'****
Add the directive v-gmaps-searchbox
into your input
<input v-model=vm.searchPlace v-gmaps-searchbox=vm>
This will popule your vm.place
object with details about selected place.
By default, vm.place
is used, you can change this passing an argument to directive e.g :anotherProperty
<input v-gmaps-searchbox:myProperty=vm>
So vm.myProperty
will be filled with details about selected place
All information about place is put is filled, to determinate whats fields should be use, you can specify a modifiers like this .name.website.formatted_address.geometry
<input v-gmaps-searchbox:myProperty.name.website.formatted_address.geometry=vm>
So your vm
will set property myProperty
like this
{
myProperty: {
name: <value_from_result>,
website: <value_from_result>,
formatted_address: <value_from_result>,
geometry: <value_from_result>,
}
}