laden Google Maps auf klicken

-1

Ich möchte Google Map anzeigen, nachdem ein Link angeklickt wurde.laden Google Maps auf klicken

Ich habe Folgendes versucht. Wenn der Link angeklickt wird, dann:

Insert div nach Verbindung mit der ID map
laden Google Maps API mit jQuery Methode $ .getScript
In Google Maps div mit id map

Leider scheint Schritt 2 nicht zu funktionieren. In der JS-Konsole finde ich den Fehler

ReferenceError: google is not defined

Das ist mein Code ist, mit der Ausnahme, dass ich meine eigentliche Google-API-Schlüssel mit der Zeichenfolge mykey an der Linie

$.getScript("https://maps.googleapis.com/maps/api/js?key=mykey");

Warum kann ich zählen die Google ersetzt haben Maps-API so? Wie kann ich es aufnehmen?

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="/resources/vendor/jQUery/jquery-1.11.2.min.js"><\/script>')</script> 
    <script> 
    $(document).ready(function(){ 
     $('#showMap').click(function(e){ 
     e.preventDefault(); 

     $('#showMap').after("<div id='map' style='height: 200px;background-color:#08c;width: 200px;'></div>"); 

     $.getScript("https://maps.googleapis.com/maps/api/js?key=mykey"); 

     $lat = 10.1364; 
     $lng = -80.2514; 

     var myLatLng = {lat: $lat, lng: $lng}; 

      var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 11, 
      center: myLatLng 
      }); 

      var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map 
      }); 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <a href='#' id="showMap">Hello</a> 
    </body> 
</html>

Quelle

2016-07-01 Adam

Es funktioniert völlig in Ordnung. Schauen Sie sich this fiddle an. Ihr Problem ist, dass Sie alle Ihre Init-Sachen synchron gemacht haben, während getScript ein Async-Aufruf für ein externes Skript ist.

Das zweite Argument von $.getScript nimmt eine Callback-Funktion.

Es ist auch nicht notwendig, Ihr Karten-DIV nach zu fügen, es einfach dort zu haben.

$('#show-map').click(() => { 
    $.getScript('https://maps.googleapis.com/maps/api/js',() => { 

    var myLatLng = { 
     lat: 10.1364, 
     lng: -80.2514 
    } 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 11, 
     center: myLatLng 
    }) 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map 
    }) 

    }) 
})

Quelle

2016-07-01 10:56:22

Schön danke! Ich akzeptiere deine Antwort in 6 Minuten. – Adam

laden Google Maps auf klicken

Antwort

Verwandte Themen