Issue Loading Googlemaps Javascript Library

[eddysantos]

Hello guys!

So, I'm having an issue properly loading Googlemaps Javascript Library.

I'm loading it through my app.js, by appending it to the tag like this:

let gmapsLib = document.createElement('script');

gmapsLib.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&libraries=places');

document.head.appendChild(gmapsLib);

The above code gets called before the Vue app is instantiated.

And then I use the library like this:

this.$nextTick(() => {

      let ac_input = document.getElementById(`google_ac_${this.stopIndex}`);


      const ac = new google.maps.places.Autocomplete(ac_input, {
          componentRestricitons: { country: 'us' },
          fields: ['address_component', 'name', 'formatted_address'],
      });

});

When I access my site and navigate to the route that uses the library, by using the InertiaLink component, everything works fine.

However, if I refresh the page while being inside the route that uses the library, I get an error saying 'google is not defined'.

I'm sure this has something to do with the order that stuff gets loaded, but I cannot figure out how should I do it .. can anyone shed some light on my ignorance?

[krsriq]

I'm sure that there is a nicer solution, but this seems to work:

const loadGoogleMaps = () => {
    let ac_input = document.getElementById(`google_ac_${this.stopIndex}`);

    const ac = new google.maps.places.Autocomplete(ac_input, {
        componentRestricitons: {country: 'us'},
        fields: ['address_component', 'name', 'formatted_address'],
    });
}

if (typeof google == "undefined") {
    window.addEventListener('load', loadGoogleMaps)
} else {
    loadGoogleMaps()
}

This checks if google is undefined (on direct page visits) - if so it adds an event listener that initializes Autocomplete only when the google maps script is loaded. If google is already defined (on page visits via InertiaLink) it initializes Autocomplete right away.

[eddysantos]

Thanks for taking the time to answer.

I managed to google my way out of this. Which, in essence, it's similar to what you did.

I found an npm package (albeit I would love to depend as little as I can on packages) which helps loading the Google API Library:

import GoogleMapsApiLoader from 'load-google-maps-api';
export default {
    async beforeMount() {

        this.google = await GoogleMapsApiLoader({
            key: API_KEY_HERE,
            libraries: ['places']
        });

        this.setupGoogleAutocomplete();

    },
}

I was calling the Autocomplete method on a watcher since the autocomplete input is dependant on a select input (basically, only show it if they're adding an address from the US).

So instead of doing that, I´m calling it both from the watcher and beforeMount, and the method is not checking if the select is 'US'.