Wie kann ich "Uncaught ReferenceError: Google ist nicht definiert" auflösen? (Google MAPS API)

Ich habe ein Projekt, das in der Anzeige einer Google-Karte mit Informationen über die Stadt Orte (Punkte von Interesse, wie Schule, Restaurant, U-Bahn, ...) Aber ich muss lernen, zu bestehen Verwenden Sie zuerst die API.Wie kann ich "Uncaught ReferenceError: Google ist nicht definiert" auflösen? (Google MAPS API)

Ich habe Schwierigkeiten, einen einfachen Marker anzuzeigen, tatsächlich habe ich "Uncaught ReferenceError: Google ist nicht definiert" in der Chrome-Konsole und Marker wird nicht angezeigt. Ich habe überall im Forum gesucht, aber nichts hat mir geholfen.

biete ich Ihnen meine kleine HTML-Code:

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<p> TEST MAP </p> 
<div id="map" style="height: 500px; width:900px;"></div> 



<script type="text/javascript" src="test.js"></script> 

<script async defer src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap"></script> 

<!-- Si le script n'est pas lu par le navigateur --> 
<noscript> 
    <p>Attention : </p> 
    <p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p> 
    <p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p> 
    <p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p> 
</noscript> 

</body> 
</html>

Dann, das ist mein Javascript-Code:

var maCarte; 

    function initMap() { 
     var optionsCarte = { 
     center: {lat: 43.4810896, lng: -1.540436}, 
     zoom: 16 
     } 
     maCarte = new google.maps.Map(document.getElementById("map"),optionsCarte); 
    } 

    // Création d'un marqueur sur la carte : Ne fonctionne pas 
    var optionsMarqueur = { 
         position: {lat: 43.4810896, lng: -1.540436}, 
         map: maCarte 
        }; 

    var marqueur = new google.maps.Marker(optionsMarqueur);

Quelle

2016-05-10 m.planchon

Verschieben Sie das Skript include, so dass es nach dem Google-Skript enthalten ist. – Archer

Google Maps wird asynchronously geladen - auch wenn Sie das Script-Tag direkt enthalten. Verwenden Sie daher keine google.maps Klassen (wie google.maps.Marker), bis Sie sich in Ihrem Rückruf befinden (den Sie als initMap angegeben haben).

Ändern Sie test.js, so dass Ihr Marker in Ihrem initMap Callback erstellt wird.

Sie haben auch maCarte verwendet, während es immer noch undefined war.So müssen Sie Ihre Markierung auf der Karte hinzufügen (maCarte) nur nach Sie es erstellt haben:

var maCarte; 
    var marqueur 

function initMap() { 

    var optionsCarte = { 
     center: {lat: 43.4810896, lng: -1.540436}, 
     zoom: 16 
    } 

    maCarte = new google.maps.Map(document.getElementById("map"),optionsCarte); 

    // Création d'un marqueur sur la carte : Ne fonctionne pas 
    var optionsMarqueur = { 
     position: {lat: 43.4810896, lng: -1.540436}, 
     map: maCarte 
    }; 

    marqueur = new google.maps.Marker(optionsMarqueur); 
}

Dann spielt es keine Rolle, ob Sie test.js vor oder nach Ihrem Google Maps Skript-Tag enthalten.

Quelle

2016-05-10 14:41:09 Adam

Vielen Dank, Es klappt ! Ich verbringe meinen Tag damit:/ Ich glaube, es ist ein langer Weg zu gehen, bevor ich ein Profi von Google Maps ^^ werde –

Sie müssen googleapis laden, bevor Sie Ihren Testcode laden.

bearbeiten: Können Sie diese auch in den Kopf bewegen?

Async und verzögern zwei verschiedene Dinge tun, sollten Sie sie nicht in der gleichen Skript-Tag.

async lädt die Datei während des HTML-Parsings herunter und pausiert den HTML-Parser, um ihn nach dem Herunterladen auszuführen.

defer lädt die Datei während des HTML-Parsings herunter und führt sie erst nach Abschluss des Parsers aus.

Quelle

2016-05-10 14:11:54 Tipster74743

Vielen Dank für Ihre schnelle Antwort :) Ich habe versucht, was Sie gesagt haben, aber es funktioniert nicht –

Haben Sie das Skript test.js verschieben und async aus dem googleapis Skript entfernen? Sie müssen nicht async UND auf das gleiche Skript-Tag verschieben, sie tun verschiedene Dinge. – Tipster74743

Wenn ich das tue sagt es "initMap()" ist keine Funktion und ich habe eine leere Seite –

Sie verwenden asyn und verschieben Attribut:

async: laden asynchrone Skript
defer: excute am Ende

aber Ihre test.js ist Last und exec synchrnous: vor google maps sdk folglich google nicht definiert

http://www.w3schools.com/tags/att_script_async.asp

http://www.w3schools.com/tags/att_script_defer.asp

Quelle

2016-05-10 14:13:42

Danke für Ihre schnelle Antwort :) Wenn ich gut verstehe, muss ich nur mein erstes Skript nach dem zweiten verschieben. Aber es funktioniert nicht, ich habe die gleiche Nachricht in der Konsole und Marker erscheint nicht –

verschieben Sie nach und fügen Sie async und verschieben Sie in Ihrem Skript-Tag –

Gefällt Ihnen? –

Also muss ich die Reihenfolge ändern und „Asynchron defer“ im zweiten Skript setzen? Wie folgt aus:

<script async defer src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap"></script> 
<script async defer type="text/javascript" src="test.js"></script>

Es ändert sich nichts

Quelle

2016-05-10 14:37:51

Siehe meine Antwort. Kommentatoren verpassten ein paar Punkte. 1) Google Maps wird asynchron geladen (auch wenn Sie das Skript-Tag direkt ohne 'async' und' defer' einfügen) und 2) Sie haben 'maCarte' für Ihren Marker verwendet, während dieser noch nicht definiert war. – Adam

Wie kann ich "Uncaught ReferenceError: Google ist nicht definiert" auflösen? (Google MAPS API)

Antwort

Verwandte Themen