Google Places Autocomplete Not Working on Pages

I’m trying to implement Google Places autocomplete for an address field.

I included the script at the bottom of the index.html file, and included the initAutocomplete function in my app.js.

It works perfectly on the index.html page when I test it. BUT if I move that address field to an inner page it absolutely will not work. There are no Javascript errors and I have spent hours on this with no clue of what could be wrong.

are you usiong core vue react?
maybe you are calling


before the address field is rendered in the dom?
have you try to run the initAutocomplete manually?

I’m not using core vue react. It’s a Framework7 and Cordova app.

In the index.html file in included the Google Places API script

<script src="[API-KEY]&libraries=places&callback=initAutocomplete"
        async defer></script>

And then in my app.js file I included this function

// Enable Google Places autocomplete
function initAutocomplete() {
  new google.maps.places.Autocomplete(
      {types: ['geocode']}

And if I include this field on the index.html file, it works perfectly. Autocompletes and everything

<input type="text" id="addressAutocomplete" placeholder="" name="cf_address_line_1" style="border: 1px solid #000"/>

BUT if I place that field inside a page component then it doesn’t work at all. There are no JavaScript errors or anything, the field just won’t autocomplete as you type.

Ok so you are using f7 core.
and the issue its in the callback you pass to the script tag


my guess, google maps loads, calls the callback initAutocomplete BUT, since you have the field on a different page (component) the field its not found.

just for testing can you add this simple alert in your init fnc callback?

function initAutocomplete() {
  alert('element found: ' + !!document.getElementById('addressAutocomplete'))
  new google.maps.places.Autocomplete(
      {types: ['geocode']}

and let me know what you get from that alert

I added that and this is the alert I got

element found: true

Also, I’m not sure if this helps. But this is what I have in my routes.js file as well. So I’m not sure if I’m missing something somewhere that’s essentially “breaking the connection” when that page tries to load.

    path: '/file-complaint/',
    url: './pages/file-complaint.html',

can you move the google script to that page? i think there its a way to init gplaces manually
so no, its a required param to pass callback.

I had attempted that before, with no success. But I just moved the Google API script to the very bottom of the file-complaint.html page.

It’s not showing the alert now (that you had me add) on page reload, but the field is also not autofilling either.

I didn’t know if there is a certain way this script should be added to the inner page since it’s being loaded in through Ajax I’m assuming according to the Framework7 Documentation

ok, so did you try to run your init fnc manually? from the console. initAutocomplete()

It gave the error:

Uncaught ReferenceError: google is not defined

ohh so your google script its not there.
can you make a sample project and share it? so i can give it a try?
if not you can also share your project, will also give it a try

Sure, no problem. What would be the easiest way to share the actual project with you?

So I ended up solving the issue by wrapping the Google Places Autocomplete function in the page:init handler. So hopefully this will help someone else who may run into a similar issue.

Here’s the final code I used in my app.js file to get it to load correctly.

// Enable Google Places autocomplete
function initAutocomplete() {

  // Load Places API on page load
  $(document).on('page:init', function (e) {

    new google.maps.places.Autocomplete(
        {types: ['geocode']}


1 Like