How to use VuetifyJS Advanced slots example with Google Places API

user_974925 0
Viewed 1092

How to use the VuetifyJS Advanced slots example with Google Places API?

CodePen example

<v-autocomplete
  v-model="model"
  :items="items"
  :loading="isLoading"
  :search-input.sync="search"
  chips
  clearable
  hide-details
  hide-selected
  item-text="name"
  item-value="symbol"
  label="Search for a coin..."
  solo
>
  <template slot="no-data">
    <v-list-tile>
      <v-list-tile-title>
        Search for your favorite
        <strong>Cryptocurrency</strong>
      </v-list-tile-title>
    </v-list-tile>
  </template>
  <template
    slot="selection"
    slot-scope="{ item, selected }"
  >
    <v-chip
      :selected="selected"
      color="blue-grey"
      class="white--text"
    >
      <v-icon left>mdi-coin</v-icon>
      <span v-text="item.name"></span>
    </v-chip>
  </template>
  <template
    slot="item"
    slot-scope="{ item, tile }"
  >
    <v-list-tile-avatar
      color="indigo"
      class="headline font-weight-light white--text"
    >
      {{ item.name.charAt(0) }}
    </v-list-tile-avatar>
    <v-list-tile-content>
      <v-list-tile-title v-text="item.name"></v-list-tile-title>
      <v-list-tile-sub-title v-text="item.symbol"></v-list-tile-sub-title>
    </v-list-tile-content>
    <v-list-tile-action>
      <v-icon>mdi-coin</v-icon>
    </v-list-tile-action>
  </template>
</v-autocomplete>

I added the Google Maps Geocoding API, Google Places API Web Service and Google Maps Javascript API in the Google Developer Console and received an API Key.

vuejs2 vuetify.js vue.js google-places-api
1 Answers

Here is an instruction how to integrate Vuetify Autocompletes component with Google Places API:

1) add a reference to Google Places API

<script src="https://maps.googleapis.com/maps/api/js?&libraries=places&key=--KEY--"></script>

2) the following example shows how to populate v-autocomplete component with places using getPlacePredictions method of AutocompleteService class 

search(val) {
  if (!val) {
      return;
  }

  this.isLoading = true;

  const service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({ input: val }, (predictions, status) => {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      return;
    }

    this.items = predictions.map(prediction => {
      return {
        id: prediction.id,
        name: prediction.description,
      };
    });

    this.isLoading = false;
  });
}

enter image description here

Demo on CodePen

Prerequisites

Since Autocomplete is a feature of the Places library in the Maps JavaScript API, first ensure that the Places API is enabled in the Google Cloud Platform Console. Follow this instruction on how to enable Places API

user_13755530
Related