Google지도 API 3 이상한 행동

Question

Google Maps API 3을 다른 종류의 JavaScript 프레임 워크를 사용하는 웹 응용 프로그램에 통합하려고합니다. jQuery, Highcharts, jPolite 등입니다.이 코드는 사용하고 있습니다.

<!-- Map --> 
<div style="height: 450px;"> 
    <div id="map-canvas" style="width: 85%; height: 400px; float: left; margin-right: 10px;">  </div> 
</div> 

<script type="text/javascript"> 

jQuery(function() { 
var map; 

// 36.557372, 127.953339 
function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(36.557, 127.953), 
     zoom: 6, 
     mapTypeid: google.maps.MapTypeId.ROADMAP 
    }; 

    // Create a simple map. 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    var drawingManager = new google.maps.drawing.DrawingManager({ 
     drawingMode: google.maps.drawing.OverlayType.MARKER, 
     drawingControl: true, 
     drawingControlOptions: { 
      position: google.maps.ControlPosition.TOP_CENTER, 
      drawingModes: [ 
      google.maps.drawing.OverlayType.MARKER, 
      google.maps.drawing.OverlayType.CIRCLE, 
      google.maps.drawing.OverlayType.POLYGON, 
      google.maps.drawing.OverlayType.POLYLINE, 
      google.maps.drawing.OverlayType.RECTANGLE 
      ] 
     }, 
     polygonOptions: { 
      editable: true 
     } 
     }); 
     drawingManager.setMap(map); 

    google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) { 
     polygon.getPath().forEach(function(elem, index){ 
      var elemCoords = new Array(); 
      elemCoords.push(elem.lat()); 
      elemCoords.push(elem.lng()); 
     }); 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
}); 

그 자체로는 아주 간단한 코드입니다. 그러나 더 복잡한 HTML 구조로 통합됩니다 (문제 일 수 있음). 시작 안내서를 살펴보고 하단의 비디오를보고 난 후에 문제가 계층 구조를 따르는 DOM 요소의 높이와 너비라고 생각했습니다. 그러나 여러 번 테스트 한 결과 지도가로드되지 않는 것을 보았습니다. 즉 div "지도 - 캔버스"가 비어 있습니다. 높이가 문제가 아니라는 것을 의미합니다.

다른 브라우저 (Firefox, Chrome, IE)로 열어 보았는데 아무 것도 볼 수 없습니다. 정말 이상한 일은 개발자 툴바가 열려있는 Firefox에서 열 때마다 거의 매일로드됩니다. ??!?!

지도는 Ctrl + F5 (캐시 무시)로 페이지를 새로 고칠 때만 나타납니다. F5만이 아무것도 표시하지 않습니다.

내가 누락 된 것이 간단하다고 생각합니다. 그러나 내가 볼 수없는 다른 프레임 워크와 충돌이있을 수 있습니다.

도움을 주시면 감사하겠습니다.

Answer 1

해결 방법은 콜백 기능을 사용하여 Google Maps API를 비동기식으로 like this로드하는 것입니다. 문제의 원인은 div 자리 표시자가 만들어지기 전에 API가로드되고 맵이 아무 곳에도 저장되지 않는다는 것입니다. 이것은 jpolite 프레임 워크 또는 프로젝트에서 사용되는 다른 JavaScript 프레임 워크 때문일 수 있습니다. 어쨌든, 나는 그것이 작동하게되어 기쁘다.

function loadScript() { 
    if (!(typeof google === 'object' && typeof google.maps === 'object')) { 
     var script = document.createElement('script'); 
     script.id = 'gmapsScript'; 
     script.type = 'text/javascript'; 
     script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing,geometry&' + 
       'callback=initialize'; 
     document.body.appendChild(script); 
    } 
    else { 
     // do something when the API was already loaded 
    } 
}