web-dev-qa-db-fra.com

"google n'est pas défini" lors de l'utilisation à distance de Google Maps V3 dans Firefox

Voici mon casse-tête: J'ai une page qui utilise Google Maps V3 et jQuery. Tout a bien fonctionné localement dans FF5, Chrome et Safari. 

Une fois que j'ai téléchargé sur un site Web, une erreur "google is not defin" (erreur non définie) s'affiche sur la première ligne d'utilisation d'un objet Google.

var defaultLocation = new google.maps.LatLng(lat, lng);

Il ne se produit que dans FF _ et ne se produit qu'à distance (c'est-à-dire si je charge le fichier dans FF localement, cela fonctionne bien). Quoi qu'il en soit, Chrome et Safari semblent bien fonctionner, tout comme mes navigateurs Android et iPod.

Voici ce que j'ai essayé jusqu'à présent:

  1. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> déplacé en haut de la section <head>.
  2. Déplacement de tout le contenu de $(function() {...}); vers une fonction appelée initialize() et ajout de <body onload="initialize()">
  3. Joué avec l'ordre des scripts et des fichiers css
  4. Collé l'URL http://maps.google.com/maps/api/js?sensor=false dans la zone d'adresse FF et vérifié que je reçois le script légitime

Mais comme cela ne se produit que dans FF sur une machine distante et fonctionne bien sinon, je ne pense pas que cela ait quelque chose à voir avec mon code. Peut-être que l'ordre de chargement dans FF5 est vissé. Peut-être qu'il priorise les ressources réseau différemment des autres navigateurs. Je ne sais vraiment pas quoi en faire à ce stade.

Toute aide est appréciée.
Gars

Mettre à jour:
Je voulais juste ajouter le fait suivant: Après avoir essayé la version précédente sur un Mac, j’ai essayé FF5 sous Windows et reproduit exactement le même comportement.
Pour faire bonne mesure, j’ai aussi essayé Pale Moon - mêmes résultats. Chrome 14, Opera 11.50 et même frickin 'IE9 (qui n'était pas inclus dans le plan de test) fonctionnent. Cela vient juste de FF5, maintenant sur Mac et Windows 7, qui échoue sur cette page. 

javascriptfirefoxgoogle-mapscross-browser
50
Traveling Tech Guy

J'ai fait face à 'Google n'est pas défini' plusieurs fois . Il est probable que Google Script ait des problèmes pour ne pas être bien chargé avec FF-addon BTW . FF a l'option de redémarrage (comme le redémarrage de fenêtre) .__ > redémarrer avec les add-ons désactivés

24
user841019

J'ai eu la même erreur "google n'est pas défini" en utilisant Gmap3. Le problème était que j'incluais 'gmap3' avant 'google', alors j'ai inversé l'ordre

<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="/assets/gmap3.js?body=1" type="text/javascript"></script>
20
Diego Pino

Une autre suggestion qui m'a aidé:

Voici ce qui m'est arrivé => Mon script fonctionnait une fois sur 3 lorsque je chargeais la page et que l'erreur était «Google n'est pas défini».

Ma fonction utilisant Google Map était dans la fonction de disponibilité de mon document jQuery

$(function(){
   //Here was my logic
})

J'ai simplement ajouté ce code pour m'assurer que cela fonctionne:

$(function(){
   $(window).load(function(){
       //Here is my logic now
   });
});

Il fonctionne comme un charme. Si vous voulez plus de détails sur la différence entre le document prêt et le chargement de fenêtre, voici un post intéressant à ce sujet: window.onload vs $ (document) .ready ()

L'événement ready se produit après le chargement du document HTML, alors que l'événement onload se produit plus tard, lorsque tout le contenu (par exemple, des images) a également été chargé.

L'événement onload est un événement standard dans le DOM, alors que l'événement ready est spécifique à jQuery. Le but de l'événement ready est qu'il devrait se produire le plus tôt possible après le chargement du document, donc ce code qui ajoute une fonctionnalité aux éléments de la page ne le fait pas attendre que tout le contenu soit chargé.

15
Yann Chabot

Essayez d'utiliser ceci:

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
10
Hrishikesh Choudhari

essaye ça:

<script src="https://maps.googleapis.com/maps/api/js"></script>

cela fonctionne pour moi .... le point est, changez HTTP en HTTPS

5
danisupr4

Ajouter le type pour le script

<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>

Donc, la partie importante est le type text/javascript.

4
Julz

Depuis Firefox 23, Mixed Content Blocking Enabled est défini par défaut (désactivé localement). Il bloque également certaines API de Google si vous utilisez une connexion sécurisée et des API non sécurisées.

Pour le désactiver, vous devez cliquer sur le bouclier qui apparaît dans la barre d’emplacement en cas de contenu non sécurisé, définissez «Désactiver la protection», puis vous devrez regarder le point d’exclamation jaune dans la barre d’emplacement :(

https://blog.mozilla.org/.../mixed-content-blocking-enabled-in-firefox-23/

Vous pouvez toujours essayer de remplacer également le protocole http par https dans l'URL de l'API. Si l'API est également fourni dans une connexion sécurisée, vous ne verrez aucun avertissement.

Ça marche pour moi.

2
robson

Vous pouvez essayer ce qui suit:

Tout d'abord, ajoutez async defer. Cela spécifie que le script sera exécuté de manière asynchrone dès qu'il sera disponible et lorsque l'analyse de la page sera terminée. 

Deuxièmement, ajoutez la fonction initMap() en tant que rappel dans une balise de script à l'intérieur de votre code HTML. De cette façon, la carte sera initialisée avant le document.ready et window.onload: 

<script async defer src="{{ 'https://maps.googleapis.com/maps/api/js?key=$key&language='.$language.'&region='.$country.'&callback=initMap' }}"></script>

<script>
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 4,
            disableDefaultUI: false,
            scrollwheel: false,
            styles: [{ ... }]
        });
    }
</script>

Enfin, vous pouvez utiliser l'objet map dans vos fichiers js.

1
tsveti_iko

Essaye ça. Tt a travaillé avec Anguler7

0
Shanaka Kuruwita

Dans mon cas, je chargeais le script google via http alors que mon serveur utilisait SSL et était chargé via https. J'ai donc dû charger le script via https

0
Yinka

Je ne sais pas avec certitude, mais voici mes meilleures suggestions.

Vous utilisez jQuery. Ainsi, au lieu de définir l’événement, vous devriez vraiment utiliser $ (function () {...}); faire votre initialisation. Cela s’explique par le fait qu’elle garantit que tous les scripts de la page ont été chargés et que vous n’êtes pas limité à une seule fonction init, comme vous le feriez pour la balise onload body. 

Assurez-vous également que votre code Javascript se trouve après Google include. Sinon, votre code pourrait s'exécuter avant la création des objets Google.

Je suggérerais également de consulter cette page sur l'ordre des événements.

http://dean.edwards.name/weblog/2005/09/busted/

0
Paul Mendoza

Veuillez vérifier la commande que vous appelez, vos bibliothèques, la commande suivante

  1. <script type = "text/javascript" src = "../resources/googleMaps/jquery-ui.js"></script>

  2. <script type = "text/javascript" src = "../resources/googleMaps/jquery-ui.min.js"></script>

  3. <script type = "text/javascript" src="http://maps.googleapis.com/maps/api/

  4. METOD <script type = "text/javascript" src = "googleMaps/mapa.js"></script> 

J'étais avec ce problème, je viens d'ajuster ma commande.

0
Samael Pereira Simões

Modifié le 

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API"> 
      function(){
            myMap()
                }
</script>

et fait 

<script type="text/javascript">
      function(){
            myMap()
                }
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API"></script>

Ça a marché :)

0
Abhinav Anand