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!