Mehrere Google Maps dynamisch anzeigen und initialisieren

Question

Ich entwickle eine Einzelseitenanwendung, die an einer Stelle eine Liste von Ergebnissen anzeigt, von denen jedes Ergebnis eine Position enthält, die in einem separaten Google Maps-Element angezeigt werden soll. (So ​​habe ich möglicherweise viele Kartenelemente).

Um unnötige Daten zu vermeiden, sollten die Karten nur geladen werden, wenn sie angeklickt wurden. Da keine meiner Karten im SOM auf Pageload vorhanden sind (ich erzeuge sie mit jQuery), kann ich sie nicht mit einer Callback-Funktion initialisieren, die beim Laden der Google Maps-JavaScript-API als Parameter übergeben wurde. Hier ist ein Teil der Schleife, die zum Erstellen der Ergebnisliste verwendet wird. "Container" ist der div-Container, der die Map enthält, während "mapCon" das div ist, das tatsächlich das Google-Map-Element ist.

expandContainer.click(function() { 
      var mapCon = $(container.find(".googleMap")[0]); 

      function myMap() { 
       var mapProp = { 
        center: new google.maps.LatLng(51.508742,-0.120850), 
        zoom:5 
       }; 
       new google.maps.Map(mapCon,mapProp); 
      } 

      myMap(); 
     }); 

ich den Google bin Laden Maps JavaScript APIs mit dem folgenden Code (auf Stackoverflow gefunden):

$(document).ready(function() { 
function lazyLoadGoogleMaps() { 
    $.getScript("https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=googleMapsLoaded") 
     .done(function (script, textStatus) { 
      alert("Google maps loaded successfully"); 
     }) 
     .fail(function (jqxhr, settings, ex) { 
      alert("Could not load Google Maps: ", ex); 
     }); 
    } 
}); 


function googleMapsLoaded() { 
    alert("Done!"); 
} 

ich den „Fertig“ -alert Weg, bevor Sie die Ergebnisse erhalten, erzeugt werden. Trotzdem habe ich die folgende Fehlermeldung erhalten, wenn sie auf die Karten klicken:

Uncaught TypeError: Cannot read property 'defaultView' of undefined 
at new _.Fw (common.js:174) 
at Object.uz.f (map.js:57) 
at Array.<anonymous> (js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:91) 
at js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:108 
at Object.<anonymous> (js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:52) 
at js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:108 
at js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:52 
at js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:108 
at Pc (js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:54) 
at Oc.pa (js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:108) 

An diesem Punkt habe ich keine Ahnung, wie dieses Problem zu beheben und bin ein bisschen verzweifelt, eine Lösung zu finden, da es keine Option zu „auslagern“ die Karten (einseitige Anwendung).

Answer 1

Wow, so fand ich die Lösung, nachdem ich diese Frage gestellt ... :-)

statt

var mapCon = $(container.find(".googleMap")[0]); 

es soll

var mapCon = container.find(".googleMap")[0]; 

seit

sein

new google.maps.Map(mapCon,mapProp); 

w nimm kein jQuery-Element als Parameter.