Vue-Gmaps
Search address and places using Google Maps API
![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)
![NPM](https://nodei.co/npm/vue-gmaps.png?downloads=true&stars=true)
![Demo](https://github.com/Ridermansb/vue-gmaps/blob/master/vue-gmaps.gif)
Installation
npm i -S vue-gmaps
And in your main.js
...
import VueGmaps from 'vue-gmaps'
Vue.use(VueGmaps, {
key: '<your api here>'
})
Options are:
- key <Required!>,
- libraries <Default= [ 'places' ]>,
- client
- version <Default='3'>,
- loadGoogleApi <Default=true>
libraries: ['places'],
version: '3'****
Basic usage
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.
Features
Specify property
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
Specify whats fields
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>,
}
}
Click here to subscribe and get more about Vue.js