複数のGoogleマップを動的に表示して初期化する

Question

私は、それぞれの結果に別々のgoogle maps要素で表示されるはずの場所を保持する結果のリストをある時点で表示する単一ページアプリケーションを開発しています。 （私は潜在的に多くの地図要素を持っていました）。

不安定なデータロードを防ぐために、マップはクリックされるとロードされる必要があります。 私のマップはpageload上のDOMに存在しないので（jQueryを使って生成しています）、google maps javascript apiをロードしているときにパラメータとして渡されたコールバック関数を使用してそれらを初期化できません。したがって、結果リストの作成に使用されるループの一部があります。 "container"はマップを保持するdivコンテナですが、 "mapCon"は実際にGoogleマップ要素になるdivです。

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(); 
     }); 

私は、Googleが（StackOverflowの上で見つかった）次のコードを使用して、JavaScript APIのをマップロードしています：

$(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!"); 
} 

私は結果のいずれかが生成される前に、-alert方法を「完了」を取得。マップをクリックしたときにそれにもかかわらず、私は次のようなエラーメッセージが表示されます：

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) 

私はこの問題を解決する方法が分からないし、ちょっと必死だこの時点で解決策を見つけるために、「外部委託」するためのオプションではありませんので、マップ（単一ページアプリケーション）。

Answer 1

うわー、私は

以来

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

ことになっている:-)

代わりの

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

...私はこの質問を投稿した直後に解決策を見つけました

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

w jQuery-Elementをパラメータとして使用しません。