[SOLVED] F7 Vue GoogleMaps Auto-complete


#1

Hello,
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.

<template>
    <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">
                        <ul>
                            <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>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-footer">
                    <button class="col button button-fill button-raised custom-color-btn" @click="LocationFound">Confirm Address</button>
            </div>
        </div> 
        </div>
    </f7-page>
</template>

<script>
import { GoogleMapsApi } from '../classes/GoogleMapsApi';
export default {
    data() {
        return {
            addressChosen: '',
            Lat: null,
            Lon: null,
        }
    },
    methods: {
     LocationFound(){
        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',() => {
            $router.back();
         });
       }
       else {
        $router.navigate({
            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){
          e.stopImmediatePropagation();
        });
    
        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']});
                autocompletePlaces.setFields(['formatted_address','geometry']);
                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;
        self.GoogleAutocomplete();
    }
}
</script>

<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;
  }
</style>

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


#2

Hi max. Disable fast clicks


#3

And add custom high z-index:

.pac-container {
  z-index: 10000;
}

#4

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!