Skip to content
Search places and address using Google Maps API
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
.gitignore
.npmignore
.travis.yml
LICENSE.md
README.md
package.json
vue-gmaps.gif
webpack.config.js
yarn.lock

README.md

Vue-Gmaps

Search address and places using Google Maps API

Buy me a cofffe please :)

https://buymeacoff.ee/ridermansb

Travis bitHound semantic-release Commitizen friendly

NPM

Demo

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>,
    }
}
You can’t perform that action at this time.