Google지도 api v3지도가 완전하게 표시되지 않음

Question

내 애플리케이션에지도를 추가하기 위해 jquery-ui-map 플러그인을 사용하고 있습니다.

지도를로드 할 때 절반 밖에로드되지 않는 문제가 있습니다 (아래 PS 참조).

(Chrome 개발자 도구를 열면지도가 완전히로드됨을 발견했습니다.)

HTML: 
<div> 
    <div id="map_canvas"></div> 
</div> 

JavaScript: 
$(window).load(function() { 
    var mainNode = document.getElementById("map_canvas"); 
    var height = $(window).height() - $("#headerDiv").height() - $("#footerDiv").height(); 
    var width = window.screen.width; 
    mainNode.style.height = height + "px"; 
    mainNode.style.width = width + "px"; 
}); 

$(function() { 
    //Create map and zoom to corrent position 
    $('#map_canvas').gmap().bind('init', function(event, map) { 
     zoomToCurrentPosition();                                             
    }); 
}); 

function zoomToCurrentPosition() { 
    $('#map_canvas').gmap('getCurrentPosition', function(position, status) { 
     if (status === 'OK') { 
      var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
      if (currentPositionMarker !== undefined) { 
       currentPositionMarker.setMap(null); 
      } 

      currentPositionMarker = new google.maps.Marker({ 
       'position': clientPosition, 
       'bounds': true 
      }); 

      $('#map_canvas').gmap('addMarker', currentPositionMarker); 

      $('#map_canvas').gmap({ 
       'center': clientPosition, 
       'zoom': 7 
      }); 

      $('#map_canvas').gmap('get', 'map').panTo(clientPosition); 
     } 
    }); 
} 

Answer 1

지도가 DOMReady에서 실행됩니다 초기화 기능,하지만 높이가 onload 실행됩니다 설정하는 기능 (무슨 일이 발생합니다

이

내가지도를 작성하는 방법입니다 이후DWReady).

지도를 초기화하는 순간 아직 #map_canvas isn의 크기가 설정되지 않았습니다.

높이를 설정 한 후지도를 초기화하는 기능을 실행하십시오.