Search code examples
javascriptgoogle-mapsvue.jsgoogle-places-apiquasar-framework

Implementation of google places using VueJs in Hybrid mobile application

I am trying to implement searching of google places using vue js in hybrid mobile application. Searching functionality is working fine but when I click on the list of the places I can't select any of them.

I have used vue-google-places library and vue-google-autocomplete library. In both libraries I am facing the same issue.

<template>
  <q-item>
    <q-item-main>
      <q-field :error="$v.serial.$error">
        <VueGooglePlaces
          api-key="api-key"
          class="subheading"
          :enable-geolocation="true"
          types="(cities)"
          @placechanged="onPlaceChanged"
        >
          <input
            ref="address"
            float-label="Serial Number"
            type="text"
            v-model="address"
            clearable
            @blur="$v.serial.$touch"
          />
        </VueGooglePlaces>

        <vue-google-autocomplete
          id="map"
          class="form-control"
          placeholder="Start typing"
          v-on:placechanged="getAddressData"
        ></vue-google-autocomplete>
      </q-field>
    </q-item-main>
  </q-item>
</template>

import VueGoogleAutocomplete from "vue-google-autocomplete";
import Vue from "vue";

export default {
  name: "ScanBarcodePage",
  components: {
    "page-title": PageTitleComponent
  },
  mounted() {
    if (this.$refs.address) {
      this.$refs.address.focus();
    }
  },
  data() {
    return {
      address: "",
      serial: "",
      places: []
    };
  },
  methods: {
    getAddressData: function(addressData, placeResultData, id) {
      this.address = addressData.formatted_address;
    },
    onPlaceChanged: function(addressData, placeResultData, id) {
      this.address = addressData.formatted_address;
    }
  }
}

I have added the sample code above. I am not getting any error but when I type some character in text field it shows list of places but I can't select any of them. But the same plugin is working fine for browser.

enter image description here

Solution

  • My guess is that these libraries are conflicting with each other due to calling the Maps API twice. Try implementing only one of them to rule this out.

    Here's what I did to make vue-google-autocomplete work on mobile (Android) in a hybrid app via Apache cordova.

    First some context here, I created a vue + cordova app via vue-cli-plugin-cordova.

    In /public/index.html, add your Maps API script with a valid API key within the <head> element:

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

    Then go to /src/App.vue and replace all content with the code from the library's documentation's example:

    <template>
    <div>
        <h2>Your Address</h2>

        <vue-google-autocomplete
            ref="address"
            id="map"
            classname="form-control"
            placeholder="Please type your address"
            v-on:placechanged="getAddressData"
            country="sg"
        >
        </vue-google-autocomplete>
    </div>
</template>

<script>
    import VueGoogleAutocomplete from 'vue-google-autocomplete'

    export default {
        components: { VueGoogleAutocomplete },

        data: function () {
            return {
              address: ''
            }
        },

        mounted() {
            // To demonstrate functionality of exposed component functions
            // Here we make focus on the user input
            this.$refs.address.focus();
        },

        methods: {
            /**
            * When the location found
            * @param {Object} addressData Data of the found location
            * @param {Object} placeResultData PlaceResult object
            * @param {String} id Input container ID
            */
            getAddressData: function (addressData, placeResultData, id) {
                this.address = addressData;
            }
        }
    }
</script>

    Then plug in a device (or emulator) and run your app. You should be able to select a place from Autocomplete predictions without problem.

    If you still can't, then check that your API key is in fact valid, i.e. it must be properly (un)restricted and belong to a Cloud project that has billing, JavaScript API & Places API enabled. More info in Google's guide here.

    Really hope this helps you!