Google Maps dynamisch hinzugefügt mit jquery

Question

Ich verwende Google Maps, um einige Standorte anzuzeigen. Ich möchte die ganze Zeit nicht auf dem Bildschirm abbilden, daher verwende ich jquery, um die Karte nach Bedarf anzuhängen.

$('./map').append('<script async defer 
src="https://maps.googleapis.com/maps/api/js? 
key='+map_key+'&amp;libraries=visualization&amp;callback=initialize">'); 

Dies funktioniert für die Karte, aber ich kann dann keine Methoden zum Hinzufügen von Markern aufrufen. Die Seite hört gerade auf zu laden und ich kann keinen Fehler finden.

addMarkers(makers); 

Der Debugger wird hier:

for(var i = 0; i < coordinates.length; i++) { 

     marker = new google.maps.Marker({ 
      position: {lat: coordinates[i].coordinates[1], lng: coordinates[i].coordinates[0]} , 
      map: map 
     }); 
     bounds.extend({lat: coordinates[i].coordinates[1], lng: coordinates[i].coordinates[0]}); 
     map.fitBounds(bounds); 
    } 

aber die neue Google-Kartenmarkierung wird nicht ausgeführt. Die Karte erscheint gut, wenn ich diese Methode auskommentiere.

Answer 1

$('./map').append(<'script async="async" defer="defer" src="https://maps.googleapis.com/maps/api/js? key='+map_key+'&amp;libraries=visualization&amp;callback=initialize">') 

sollte sein:

$('.map').append('<script async defer src="https://maps.googleapis.com/maps/api/js? key='+map_key+'&amp;libraries=visualization&amp;callback=initialize">'); 

Sie haben die Anführungszeichen nach dem "<" der Code ungültig zu machen. Außerdem nehmen Async und Defer keine Werte an und werden "boolesche Attribute" genannt.

Lesen Sie mehr hier:

http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html