Google Map lädt nicht mit separaten Dateien

Ich kann die Google Map nicht auf meinem Monitor sehen, aber wenn ich den gesamten Code in eine einzige HTML-Datei lege und Skript-Tags verwende, funktioniert es.Google Map lädt nicht mit separaten Dateien

Index.html Datei ist:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    </head> 
    <body> 
    <div id="map"></div> 

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIpWlWVDAqVEyW20SX6MfThL-iz9IWeQA&callback=initMap" 
    ></script> 
    </body> 
</html>

script.js Datei ist:

function initMap() { 

    var map; 
      map = new google.maps.Map(document.getElementById('map'), 
      { 
       center: { lat: -34.397, 
         lng: 150.644 
         }, 
       zoom: 8 
      } 
      ); 
      }

style.css Datei ist:

* element that contains the map. */ 
    #map { 
    height: 100%; 
    } 
    /* Optional: Makes the sample page fill the window. */ 
    html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    }

Quelle

2017-07-09 Aaswin Sinha

Haben Sie das Konsolenprotokoll auf Fehler überprüft? – navigator

Ja, keine Fehler im Konsolenprotokoll –

Haben Sie in Ihrem Browser überprüft, ob der Kartenausschnitt mit Inhalt gefüllt ist? – arifCee

#map { width:100%; height:200px;}

oder ganz zu füllen Fenster:

#map { width:100%; min-height:100%;}

wenn es das erste Kind mit min-height Eigenschaft ist. PS. Sie können auch versuchen, einen Überlauf hinzuzufügen: versteckt; für das zweite Beispiel.

Quelle

2017-07-09 08:30:06 Wordica

Wenn Sie script.js ausführen, versucht es das div mit der ID = "map" zu finden. Aber es ist nicht initialisiert noch .So, müssen Sie zwei Dinge tun:

Fügen Sie die Datei script.js nach Ihre <div id="map"></div>
Anruf initMap()nach der Seite geladen. Z.B. so (am Ende) <script>initMap()</script>

Quelle

2017-07-09 08:32:27 arifCee

Nicht funktioniert Bitte helfen –

Ich konsolidiert Ihr HTML und es funktioniert gut. Aus irgendeinem Grund funktioniert Ihre Callback-Funktion nicht in einer separaten Datei.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
     #map { 
     height: 100%; 
    } 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    <script> 
    function initMap() { 
    var map; 
    map = new google.maps.Map(document.getElementById('map'), 
    { 
     center: { lat: -34.397, lng: 150.644}, 
     zoom: 8 
    } 
    ); 
    } 
    </script> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIpWlWVDAqVEyW20SX6MfThL-iz9IWeQA&callback=initMap" 
    ></script> 
    </body> 
</html>

Quelle

2017-07-09 08:38:26 navigator

Durch etwas anderes meinst du ??? –

Scheint Callback-Funktion funktioniert nicht beim Aufruf in einer separaten Datei. Obwohl keine Fehler gemeldet wurden. – navigator

Nach der Dokumentation: Google Maps APIs, setzen Sie Ihre JavaScript (script.js) nach Ihrer Karte.

<div id="map"></div> 
<script src="script.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIpWlWVDAqVEyW20SX6MfThL-iz9IWeQA&callback=initMap" async defer></script>

bearbeiten: Vergessen Sie nicht, am Ende des zweiten Skript "async verschieben".

Quelle

2017-07-09 08:42:52

immer noch nicht funktioniert auch nach der Umsetzung der oben genannten Änderungen –

Ok, es ist sehr seltsam, ich kopiere hinter Ihrem Code in meinem "www" -Ordner und es funktioniert direkt. Pfade zu "style.css" und "script.js" sind korrekt? Vielleicht ist JavaScript in Ihrem Browser deaktiviert ... –

Google Map lädt nicht mit separaten Dateien

Antwort

Verwandte Themen