[SOLVED] F7 Vue GoogleMaps Auto-complete

I have a problem. I load google-Maps API through a promise.
All these work, I use self.$refs to point to the autocomplete input field and yeah, It works but as you can see, google creates it’s class .pac-container below the script and I can’t seem to see it when typing.

On typing,
I can still see .pac-item divs with suggestions are being created.

so google is working well but I can’t do selections and stuff. Below is my component.

    <f7-page :page-content="false">
       <!-- Navbar -->
        <div class="page-content"> 
            <div class="card card-outline">
                <div class="card-header"><strong>Please Enter Your Address...</strong></div>
                <div class="card-content card-content-padding">
                     <div class="list no-hairlines-md">
                            <li class="item-content item-input item-input-outline">
                                <div class="item-inner">
                                    <div class="item-input-wrap">
                                        <input type="text" ref="autocomplete" placeholder="Where Are You Located?" class="text-color-black" />
                                        <span class="input-clear-button"></span>
                <div class="card-footer">
                    <button class="col button button-fill button-raised custom-color-btn" @click="LocationFound">Confirm Address</button>

import { GoogleMapsApi } from '../classes/GoogleMapsApi';
export default {
    data() {
        return {
            addressChosen: '',
            Lat: null,
            Lon: null,
    methods: {
        const self = this;
        const app = self.$f7;
        const $router = self.$f7router;

       if(self.Lat===null && self.Lon===null){
        app.dialog.confirm('Do You Want To Try Auto-Location Instead?','Location Needed',() => {
       else {
            name: 'some-route'
            }, {
                context: {
                address: self.addressChosen,
                lat: self.Lat,
                lon: self.Lon

     GoogleAutocomplete() {
        const self = this;
        const $ = self.$$;
        //Not sure, this will actually work...
        $('body').on('touchstart touchend','.pac-container', function(e){
        const gmapApi = new GoogleMapsApi();
        gmapApi.load().then(() => {
               //input field for autocomplete
               const input = self.$refs.autocomplete;
               const autocompletePlaces = new google.maps.places.Autocomplete(input);
                autocompletePlaces.setComponentRestrictions({'country': ['ug']});
                google.maps.event.addListener(autocompletePlaces,'place_changed', function () {
                  const place = autocompletePlaces.getPlace();
                    self.addressChosen = place.formatted_address;
                    self.Lat = place.geometry.location.lat();
                    self.Lon = place.geometry.location.lng();
    mounted () {
        const self = this;

<style scoped>
.page-content {
    padding-top: 27% !important;

 .pac-container {
  z-index: 20000;

.pac-item-query:after {
    content: '\A' !important;
    white-space: pre !important;

 .pac-icon {
  display: none !important;

 .pac-item {
  padding-left: 14px !important; 
  color: green !important;

  .place-text-color {
    color: #000 !important;

how do I go about it? @nolimits4web, @pvtallulah.
Thanks in advance

Hi max. Disable fast clicks

1 Like

And add custom high z-index:

.pac-container {
  z-index: 10000;
1 Like

thanks @nolimits4web and @pvtallulah. all worked when I used global css in the main app component app.vue. Scoped styles was the reason it was failing. high z-index and disabling fastclicks really did the magic. blessings!