Vuetify Google components

Defines a set of reusable components designed using vuetify, that has built in interactions with Google's APIs.

Table of contents

• Vuetify Google components
  • Table of contents
  • How to use ?
    • Requirements
    • Installation
    • Google SDK libraries
  • Library types
    • GLocation
    • GPlace
  • Available components
    • Autocomplete
      • Example usage
      • Lazy loading explained
    • Map
      • Example usage

How to use ?

Requirements

In order to use this library, you have to properly configure the following

• vuetify (used to style components)

Installation

Register VuetifyGoogleComponents in your vue.js application.

import Vue from 'vue'
import VuetifyGoogleComponents from './path/to/vuetify-google-components'

Vue.use(VuetifyGoogleComponents, {
  apiKey: process.env.VUE_APP_GOOGLE_API_KEY,
  libraries: {
    places: true,
    // ...
  }
})

• Here I assume you provided an environment variable named VUE_APP_GOOGLE_API_KEY containing a valid api key provided by google
• The libraries field contains a list of boolean matching valid Google SDK libraries required by your application[1].

Google SDK libraries

To learn more, please refers to Google's documentation.

https://developers.google.com/maps/documentation/javascript/libraries

Library types

GLocation

{
  lat: number;
  lng: number;
}

GPlace

{
  name: string;
  location: GLocation;
}

Where location has type GLocation

Available components

Autocomplete

Input to query addresses from Google Places. When an option is selected, v-model is updated with the selected GPlace.

Example usage

<template>
  <google-place-autocomplete v-model="place" />
</template>

Lazy loading explained

To optimize your google API key's quotas, you don't want to call google search api each time the query changes. That's why autocomplete suggestions are lazy loaded according to the following principle.

Map

Display a GPlace object in a Google map.

Optionally centered on a GLocation.

Example usage

Assuming you want to search places next to Bejing, you could do the following.

<template>
  <google-place-autocomplete v-model="place" />
  <google-map :place="place" :center="bejing"/>
</template>

<script>
export default{
  data(){
    return {
      place: null,

      bejing: {
        lat: 39.90419989,
        lng: 116.4073963
      }
    }
  }
}
</script>