@pvtallulah, I later decided to include my class into the file itself… But there is an issue, everything seems to load and work well but I can barely see any suggestions from google. We later decided to use google autocomplete API. I test the code on a separate file (not in F7), everything works well but on doing so inside my app (F7), I can barely see a thing…
my APP.JS
// Dom7
var $ = Dom7;
// Theme
var theme = 'auto';
if (document.location.search.indexOf('theme=') >= 0) {
theme = document.location.search.split('theme=')[1].split('&')[0];
}
class GoogleMapsApi {
/**
* Constructor set up config.
*/
constructor() {
// api key for google maps
this.apiKey = 'API_KEY';
// set a globally scoped callback if it doesn't already exist
if (!window._GoogleMapsApi) {
this.callbackName = '_GoogleMapsApi.APILoaded';
window._GoogleMapsApi = this;
window._GoogleMapsApi.APILoaded = this.APILoaded.bind(this);
}
}
/**
* Load the Google Maps API javascript
*/
load() {
if (!this.promise) {
this.promise = new Promise(resolve => {
this.resolve = resolve;
if (typeof window.google === 'undefined') {
const script = document.createElement('script');
script.src = `https://maps.googleapis.com/maps/api/js?key=${this.apiKey}&libraries=places&callback=${this.callbackName}`;
script.async = true;
document.body.append(script);
} else {
this.resolve();
}
});
}
return this.promise;
}
/**
* Globally scoped callback for the map loaded
*/
APILoaded() {
if (this.resolve) {
this.resolve();
}
}
}
// Init App
var app = new Framework7({
id: 'io.framework7.testapp',
root: '#app',
theme: theme,
actions: {
backdrop: false,
},
data: function () {
return {
LoadGoogleAPI: {
CLASS_OBJECT: new GoogleMapsApi(),
},
};
},
dialog: {
color: 'red'
},
view: {
pushState: false,
animate: true,
mdSwipeBackAnimateShadow: false,
stackPages: true
},
methods: {
},
routes: routes,
vi: {
placementId: 'pltd4o7ibb9rc653x14',
},
});
app.views.create('.view-main', {
url: '/'
});
so, On my component:, I use it like:
GoogleAutocomplete: function(){
const gmapApi = self.$root.LoadGoogleAPI.CLASS_OBJECT;
gmapApi.load().then(() => {
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.setTypes([]);
autocomplete.setFields(['address_components', 'geometry', 'name']);
autocomplete.setComponentRestrictions({'country': ['ug']});
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
app.dialog.alert("Invalid Address: '" + place.name + "'");
return;
}
else{
var myLocation = String(place.geometry.location);
var resulta = myLocation.slice(1,-1);
var myLatLongArray = resulta.split(",");
var Lat = myLatLongArray[0];
var Lng = myLatLongArray[1];
input.val() = place.name;//input box
/*Logic*/
}
});
});
},
On pageInit(), i simply call the function like: self.GoogleAutocomplete();
I get no errors in the console, my test script works very well… I just dont know why I cant see any predictions when i type…
<template>
<div class="page manual-locs-page" data-name="found-doc-info">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title"><strong>Choose Your Address</strong></div>
</div>
</div>
<div class="page-content">
<div class="card card-outline">
<div class="card-header card-header-style"><strong>Alright, Tell Us Your Address...</strong></div>
<div class="card-content">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap">
<input type="text" id="pac-input" class="text-color-black no-fastclick" placeholder="Where Are You Located?"/>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
{{#if TurnRestOfPageVisible}}
<div class="block">
<div class="row">
<button class="col button button-fill button-raised proceed-btn" @click="ShowOtherCOntent"><strong>CONFIRM PLACE</strong></button>
</div>
</div>
{{/if}}
{{#if showTheRestOfThePage}}
<div class="card card-outline">
<div class="card-content card-content-padding">
<table>
<tr><td><strong class="text-color-black">Address: </strong></td><td><strong class="text-color-blue" id="address-value">{{address_chosen}}</strong></td></tr>
</table>
</div>
</div>
<div class="block">
<div class="row">
<button class="col button button-fill button-raised proceed-btn" @click="chooseLocation"><strong>PROCEED WITH REGISTRATION</strong></button>
</div>
</div>
{{/if}}
</div>
</div>
</template>
There are several DOM control methods but just that’s how my template looks like… I am guessing it is a CSS problem maybe…
I can create a fiddle and send you the key privately… I am thinking it is a CSS problem…maybe
