Erstellen Element zum Einfügen einer API

Question

Ich möchte ein div mit Javascript erstellen, um meine Google Map in. Es erstellt ein Div, aber nicht die Map-API hinein. Bitte helfen Sie.

Answer 1

Sie müssen sicherstellen, dass das Google Maps-API-Skript geladen wurde, bevor Sie Ihren Code ausführen. Derzeit versuchen Sie, die Karte zu erstellen, bevor der Browser die Karten-API heruntergeladen hat.

Der einfachste Weg, dies zu beheben, ist Ihre HTML, dies zu ändern:

<script src="https://maps.googleapis.com/maps/api/js?key="Entered key here deleted it for stackoverflow"&callback=initMap"> 
<script src="javascript.js"></script> 

Sie auch die Google Maps Skript-Tag entfernen konnte und es dynamisch in javascript.js mit jQuery laden $.getScript() oder mit einfachen JS mit https://github.com/filamentgroup/loadJS, Ausführen des Codes als Rückruf

Answer 2

initMap wird ausgelöst, wenn das Skript geladen wird, aber create wird erst aufgerufen, wenn Sie auf das p-Tag klicken. Hier ist ein Weg, um dieses Problem zu erhalten, aber immer noch warten, bis das Skript vor den Klicks zu laden:

var mapready = false, createcalled = false; 
 

 
function create() 
 
{ 
 
    createcalled = true; 
 
    if(mapready){ 
 
    var newDiv = document.createElement("map"); 
 
    newDiv.id = "map"; 
 
    newDiv.style.border="solid"; 
 

 
    document.body.appendChild(newDiv); 
 
    
 
    var uluru = {lat: 54.278556, lng: -8.460095}; 
 
    var map = new google.maps.Map(document.getElementById('map'), {zoom: 16,center: uluru}); 
 
    var marker = new google.maps.Marker({position: uluru,map: map}); 
 
    } 
 
} 
 

 
function initMap() 
 
{ 
 
    mapready = true; 
 
    if(createcalled) create(); 
 
}

In diesem Szenario, wenn der Benutzer den p Tag klickt, bevor die Karte bereit ist, Die create-Funktion wird ausgelöst, sobald die Karten-API geladen wurde.