Search Places And Address Using Google Maps API – Vue-Gmaps

Search Places And Address Using Google Maps API – Vue-Gmaps

This is a Vue.js component for places autocomple that allows to search places and addresses using Google Maps JS API.


Search address and places using Google Maps API

Buy me a cofffe please :)

Travis bitHound semantic-release Commitizen friendly




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 object with details about selected place.


Specify property

By default, 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


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

Github Repository

Tags: #VueJs