web-dev-qa-db-fra.com

Uncaught ReferenceError: Google n'est pas défini

Je veux utiliser la fonction de géolocalisation et de direction, mais il y a google is not defined Erreur. le code est comme ci-dessous:

function loadScript() {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = "https://maps.googleapis.com/maps/api/js?key=mykey&sensor=true" + "&callback=initialize";
            document.body.appendChild(script);
        }

Il semble que le loadScript ne fonctionne pas!

var mapOptions = {
                zoom : 13,
                mapTypeId : google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

L'erreur saute d'ici. Quelqu'un sait-il comment le comprendre? Je dois utiliser la clé pour obtenir le service de géolocalisation, donc je ne peux pas utiliser de simple

<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
javascriptgeolocation
13
user1683941

Si vous obtenez une erreur dans la console, voici la solution simple que j'ai appliquée.

inclure les fichiers de script dans une séquence donnée ..

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

Vous devez d'abord inclure 'maps.googleapis.com/maps/api/js?sensor=false' d'abord, puis allez dans la bibliothèque jquery et supprimez-le du dessous (cela fonctionnera.) J'espère que cela fonctionnera certainement.

11
Farid Abbas

Je l'ai essayé par moi-même avec ce code - cela a bien fonctionné pour moi

Dynamique avec clé 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html {  height: 100%; }
        body
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        #map_canvas { height: 100%;}
    </style>
    <script type="text/javascript">
        function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
        }
        var myKey = "ENTER_YOUR_KEY_HERE";
        function loadScript() {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = "https://maps.googleapis.com/maps/api/js?key=" + myKey + "&sensor=false&callback=initialize";
            document.body.appendChild(script);
        }
    </script>
</head>
<body onload="loadScript()">
    <div id="map_canvas" style="width: 100%; height: 100%">
    </div>
</body>
</html>

Statique sans clé 

  ...
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
</script>
</head>
<body onload="initialize()">
   ...

En surfant sur le net, je suis tombé sur une note importante!

API JavaScript Google Maps v3

L'API JavaScript de Google Maps v3 ne nécessite pas de clé API pour fonctionner correctement. Cependant, nous vous encourageons fortement à charger l'API Maps à l'aide d'une clé de console API qui vous permet de surveiller l'utilisation de l'API Maps de votre application. Découvrez comment utiliser une clé de console API.

Voir API Google Maps

Donc, apparemment, vous n'avez plus besoin d'une clé de développeur! Je l'ai essayé avec les deux - statique sans clé et dynamnic avec clé - les deux ont fonctionné.

11
Pilgerstorfer Franz