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