Google Places Autocomplete Not Working on Pages

1

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.

2

are you usiong core vue react?
aside;
maybe you are calling

initAutocomplete

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

3

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="https://maps.googleapis.com/maps/api/js?key=[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(
      (document.getElementById('addressAutocomplete')),
      {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.

4

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

&callback=initAutocomplete

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(
      (document.getElementById('addressAutocomplete')),
      {types: ['geocode']}
  );
}

and let me know what you get from that alert

5

I added that and this is the alert I got

element found: true
6

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',
  },
7

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

8

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

9

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

10

It gave the error:

Uncaught ReferenceError: google is not defined
11

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

12

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

13

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(
        (document.getElementById('addressAutocomplete')),
        {types: ['geocode']}
    );

  })

}
1 Like