web-dev-qa-db-fra.com

Comment charger le javascript externe de google maps après le chargement de la page?

Je fournirai plus d'informations pour expliquer ma situation. Je crée une application avec PhoneGap pour le déploiement sur iOS. J'ai une vue/page vers laquelle l'utilisateur naviguera (sans utiliser ajax) qui chargera les scripts google maps js nécessaires et fera un appel à l'api de géolocalisation cordova.

Mon problème est que le chargement du script google maps:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXX&sensor=true"></script>

Prend trop de temps à charger et empêche la page de s'afficher pendant près de 3 secondes. Je souhaite différer la charge du script externe jusqu'à ce que la page soit entièrement rendue. Mettre le script en bas de la page juste avant n'aide pas du tout.

J'essayais d'utiliser getScript () mais cela ne fonctionnera pas et génère l'erreur suivante dans la console de débogage:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

J'ai essayé "defer" et "async" dans la balise de script réelle, mais cela génère également la même erreur. Les autres méthodes de chargement de fichiers JS externes m'arrivent avec le même message d'erreur.

Existe-t-il une solution de contournement possible à ce problème. Je ne sais même pas ce que signifie la déclaration d'erreur ...

javascripthtmlgoogle-maps
30
Ryan Coolwebs

J'ai essayé ma solution et cela a fonctionné.

Exécutez le script sur dom ready à l'aide de jquery.

essentiellement au lieu d'utiliser votre function initialize comme ceci:

function initialize(){
/*You code */
}

faites ceci:

$(function(){
/*You code */
})

Et pas besoin de google.maps.event.addDomListener(window, 'load', initialize);

Plus.

Edit # 1: Je suis actuellement confronté à un problème familier, et je pense avoir une meilleure solution pour vous maintenant.

dans votre fichier JS, après votre fonction d'initialisation, mettez cette fonction:

var ready: // Where to store the function

    ready = function() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'libraries=places&'+'callback=initialize';
      document.body.appendChild(script);
    };

Ce qu'il fait, c'est qu'il appelle d'abord le chargeur de carte, puis appelle la carte une fois que le chargeur est prêt.
Et ensuite utilisez ce que vous venez d'écrire avec ce

Dans votre page html:

<script>
    $.getScript("You js file path",function(){
          $(document).ready(ready);
    });
</script>

Et ceci obtient le script afin que vous puissiez utiliser ses variables, puis appelez la variable dont vous avez besoin ready une fois que le DOM est prêt et terminé le chargement.

Je recommande de mettre cela au bas de votre page html, après la fermeture du corps.

13
Hamza Ouaghad

J'essayais de charger google maps dans une vue partielle qui se chargerait comme une page standard (ce qui n'était pas le problème) ou un mod bootstrap et sans chance avec cette erreur (pour le modal ):

n'a pas réussi à exécuter "écriture" sur "document": il n'est pas possible d'écrire dans un document à partir d'un script externe chargé de manière asynchrone à moins qu'il ne soit ouvert explicitement.

Je n'utilise pas de scripts parce que j'appelle dynamiquement les marqueurs de mon modèle de données (ou du moins je ne suis pas allé jusque-là). Quoi qu'il en soit, grâce à Hamza, j'ai pu le faire fonctionner avec ceci:

<div id="map-canvas" style="width:512px;height:464px;"></div>

@*<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>*@
    <script type="text/javascript">
    function initialize() {
        var mapDiv = document.getElementById('map-canvas');

        var mapOptions = {
            zoom: 1,
            minzoom: 1,
            mapTypeControl: true,
            zoomControl: true,
            scaleControl: true,
            streetViewControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(mapDiv, mapOptions);

        //var markers = getMarkers(map);
        map.setCenter({ lat: 0, lng: 0 });

    };

    //google.maps.event.addDomListener(window, 'load', initialize);
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&callback=initialize';
    document.body.appendChild(script);
</script>

Une pensée de plus, j'ai également dû supprimer le fondu de mon modal, ce qui correspond à quelqu'un d'autre qui a déclaré qu'il devait retarder l'exécution d'une seconde. J'ai essayé le correctif de redimensionnement et tout cela sans succès également.

Beaucoup d'essais et d'erreurs sur celui-ci, j'espère que quelqu'un gagnera du temps.

4
Sum None

// Utilisation de la fonction getScript de jQuery

$.getScript('[js containing the initialize function]',function(){
    $.getScript('https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize');
});

Explication:

Chargez d'abord votre script externe contenant la fonction d'initialisation et lors du rappel, chargez l'API google map avec un rappel égal à initialiser.

2
jroi_web