Vue-Gmaps

Search address and places using Google Maps API

Buy me a cofffe please :)

https://buymeacoff.ee/ridermansb

Installation

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:

• 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>,     } }