vue-gmaps

Vue.js plugin that allow search address and places using Google Maps API

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-gmaps
11850.2.26 years ago6 years agoMinified + gzip package size for vue-gmaps in KB

Readme

Vue-Gmaps
Search address and places using Google Maps API

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 ,
  • libraries 'places' >,
  • client
  • version ,
  • loadGoogleApi

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.js0