Skip to content

Vuetify autocomplete component for google places. Easy to link to a google map component!

Notifications You must be signed in to change notification settings

wallslide/google-maps-autocomplete-vuetify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@nagoos/google-maps-autocomplete-vuetify

A component to allow users to lookup places, and see their selected place on a map. Uses the google maps places API, Vuetify, and vue2-google-maps.

See working demo

Installation

yarn add @nagoos/google-maps-autocomplete-vuetify

Setup

This component requires two main libraries to work: Vuetify, and vue2-google-maps

This component won't work until you setup the vue2-google-maps library with your google maps api key:

import Vue from "vue";
import * as VueGoogleMaps from "vue2-google-maps";

Vue.use(VueGoogleMaps, {
  load: {
    key: "<your google api key>",
    libraries: "places"
  }
});

This component relies on the Maps JavaScript API, Places API, and the Geocoding API which you can enable from your google cloud console.

Usage

  1. Import the library into your component:
import GoogleMapsAutocomplete from "@nagoos/google-maps-autocomplete-vuetify";
  1. Add to your VueJS component's components section:
components: {
    GoogleMapsAutocomplete,
    ...
},
  1. Use in your component's template:
<GoogleMapsAutocomplete
    v-model="address"
    :restrict-to-countries="['jp']"
    @initialized="mapsLoaded = true"
    class="ma-1"
    placeholder="Enter a business name"
/>

API

v-model

When a user selects a place, the v-model is updated with a json object representing the selected place.

Example:

{
  "name": "WAGYUMAFIA THE BUTCHER’S KITCHEN",
  "address": "WAGYUMAFIA THE BUTCHER’S KITCHEN, 1 Chome-14-16 Nishiazabu, Minato City, Tokyo, Japan",
  "placeId": "ChIJz55I6XqLGGARpI3NfnSQINk",
  "location": {
    "lat": 35.6611479,
    "lng": 139.72333349999997
  }
}

restrict-to-countries

Pass an array of countries to limit the Places results to those countries.

initialized

The component will emit an initialized event once the Google Maps libraries are ready, and it has prepared itself. Once this event has been emitted, you know it is safe to load a google map.

placeholder

Pass a placeholder to the component's autocomplete input. This lets you display a message when the input is blank.

noResultsFoundMessage

Pass a message to be displayed when the Google Places API couldn't find any results.

About

Vuetify autocomplete component for google places. Easy to link to a google map component!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published