Error when injecting googlemaps script source via method

Asked

Viewed 84 times

2

I would like the geocomplete not this error, however, to work, it depends on the google maps API. I removed from the header the following script and passed via method:

 <script id="id_script" src="https://maps.googleapis.com/maps/api/js?client=nome-cliente&v=3.21&language=pt-br&libraries=places&components=country:Brasil"></script>
 //(1) código removido

Where I was and how it worked:

<head>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js" id="jquery"></script>
 <script src="/js/jquery.geocomplete.min.js" type="text/javascript"></script>
 //1. antes ele estava aqui ----
  <script id="id_script" src="default.js"></script>
</head>

The method I created does the same as the script (1) that was loaded in head:

function googleMapsScriptById(client, id) {
    var url_maps = 'https://maps.googleapis.com/maps/api/js?'+client+'v=3.21&language=pt-br&libraries=places&components=country:Brasil';

    (function () {
        var gmaps = document.createElement('script');
        gmaps.type = 'text/javascript';
        gmaps.async = true;
        gmaps.src = url_maps;
        var ref = document.getElementById(id);
        ref.parentNode.insertBefore(gmaps, ref);
    })();
}

googleMapsScriptById('client=nome-cliente&','id_script');

Only now I’m getting the following error message from geocomplete, which before making this change, did not show:

jquery.geocomplete.min.js:8 Uncaught Referenceerror: google is not defined

What might be, is there some way to adjust the timing between the two?

My conclusions:

Even if I reverse, the shipment order:

<head>
<script id="antes_desse"></script>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js" id="jquery"></script>
 <script src="/js/jquery.geocomplete.min.js" type="text/javascript"></script>
  <script id="id_script" src="default.js"></script>
</head> 

Example:

googleMapsScriptById('client=nome-cliente&','antes_desse');

The error still persists, because what I understand is that the libraries in the head are preloaded before executing the method: googleMapsScriptById();, and in this case, as the others are already in the head, and this google, has not yet been loaded, its dependencies simply present error.

I wonder if there is any way to do this, as we do with use of Promise?

1 answer

2

Ivan,

The Google Maps Javascript API is being loaded before the Geocomplete API, where it requires the Google API.

In the role you created to enter the Google Maps API, then enter Geocomplete.

UPDATE: The attribute "async" will not block the loading of other scripts, if you remove it, the loading may be slower, but the Google Maps API will already be loaded.

More information here: Google Maps Javascript API

  • Don’t get it? After geocomplete or after geocomplete?

  • Then the Geocomplete. Since it needs Google Maps, you have to make sure that the map API is 100% loaded before loading Geocomplete. In my projects I use via tag in the same HTML, but without the async.

  • So, but I also tried to pass the id of the jquery script, above, so that, precisely, it created the tag, before geocomplete... and even then, the error persists. I believe the insertion method is being loaded after loading the geocomplete. Hence the error. I wonder if there’s any way to make my method go faster than all this?

  • Try to put the scripts in this order: <script src="https://maps.googleapis.com/maps/api/js?client=nome-cliente&v=3.21&language=pt-br&libraries=places&components=country:Brasil"></script>&#xA;<script src="http://code.jquery.com/jquery-1.10.1.min.js" id="jquery"></script>&#xA;<script src="/js/jquery.geocomplete.min.js" type="text/javascript"></script>&#xA;<script id="id_script" src="default.js"></script>. This way Google Maps will be loaded first, then jQuery, then Geocomplete and finally "default.js".

  • So even if the insertion is in this order, it is giving error, as I said above.

  • The only solution I can think of is to pass all the dependencies through the method, unless there is a better or simpler solution, because I didn’t want to touch those others, maybe something that makes my method become synchronized.

  • Strange, following the order I gave you, it was supposed to work. See the example page of the plugin. Example: [HTML](http://ubilabs.github.io/geocomplete/examples/simple.html. Code: (view-source:http://ubilabs.github.io/geocomplete/examples/simple.html). If it really doesn’t work, then try loading the dependencies through the method you created yourself.

Show 3 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.