여러 Google지도를 동적으로 표시하고 초기화하십시오.

Question

한 페이지 응용 프로그램을 개발하여 각 결과에 별도의 google maps 요소에 표시되어야하는 위치가 포함 된 결과 목록을 한순간에 표시합니다. (그래서 나는 잠재적으로 많은지도 요소를 가졌다.)

불의의 데이터로드를 방지하기 위해 맵은 클릭 한 번로드해야합니다. 내지도가 pageload의 DOM에 존재하지 않으므로 (jQuery를 사용하여 생성합니다.) google maps javascript API를로드하는 동안 매개 변수로 전달 된 콜백 함수를 사용하여 초기화 할 수 없습니다. 그래서 여기에 결과표를 만드는 데 사용되는 루프의 일부가 있습니다. "container"는지도를 보유하고있는 div 컨테이너이며, "mapCon"은 실제로 Google지도 요소가 될 div입니다.

$(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 방법을 얻을 : 나는 구글을로드하고

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

는 (유래에 있음) 다음 코드를 사용하여 자바 스크립트 API를 매핑합니다. 지도를 클릭하면 그럼에도 불구하고, 나는 다음과 같은 오류 메시지가 :이 시점에서

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 요소를 매개 변수로 사용하지 마십시오.