Google方向图无法在iPad上加载风景方向

我在加载地图在iPad的景观（在肖像一切工作正常）有问题。

编辑：我发现一个问题，相关的事实，因为缺乏空间，当我减less高度地图元素是“推”下方向元素aparently后。 我试图得到元素的stream体，但它仍然推下去。

景观（问题）：

当我将iPad旋转到肖像（OK）时：

代码：

脚本：

var _directionsService = new google.maps.DirectionsService(); var _directionsDisplay = new google.maps.DirectionsRenderer(); var _map = new google.maps.Map(document.getElementById('dtl-directions-map-canvas')); _directionsDisplay.setMap(_map); _directionsDisplay.setPanel(document.getElementById('dtl-directions-panel')); var start = new google.maps.LatLng(_locationLatitude, _locationLongitude); var end = new google.maps.LatLng(_partnerLatitude, _partnerLongitude); var request = { origin: start, destination: end, travelMode: google.maps.TravelMode.DRIVING, provideRouteAlternatives: true }; _directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { _directionsDisplay.setDirections(response); } }); 

视图：

 <!-- Partner's directions --> <div id="dtl-directions-ctn" class="directions-ctn"> <div class="header-ctn"> <div class="title">Direções para: </div> <div id="dtl-directions-partner-name" class="name lp-clr-orange"></div> <div id="dtl-directions-close-btn" class="close-ctn lp-clr-orange">X</div> </div> <div id="dtl-directions-panel" class="directions-panel"></div> <div id="dtl-directions-map-canvas" class="dtl-map-ctn"></div> </div> 

CSS：

 .directions-ctn { width: 100%; height: 100%; background-color: #fff; position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; z-index: 3; overflow: hidden; max-width: 1024px; max-height: 768px; box-shadow: 0 0 17px rgba(96,96,96,0.3); } .directions-ctn .header-ctn { height: 5%; } .directions-ctn .header-ctn .title { float: left; padding: 10px; } .directions-ctn .header-ctn .name { float: left; padding-top: 10px; } .directions-ctn .header-ctn .close-ctn { width: 6%; float: right; text-align: center; font-weight: bold; font-size: 1.3em; padding: 10px; cursor: pointer; } .directions-ctn .directions-panel { height: 95%; float: right; width: 50%; overflow: auto; } .directions-ctn .directions-panel .adp-placemark { margin: 0; } .directions-ctn .directions-panel .adp-placemark td { padding: 4px; vertical-align: middle; } .directions-ctn .directions-panel .adp-summary { padding: 5px 3px 5px 5px; } .directions-ctn .directions-panel .adp-legal { padding: 5px 0 5px 5px; } .directions-ctn .dtl-map-ctn { width: 50%; height: 95%; } .directions-ctn .directions-panel img, .directions-ctn .dtl-map-ctn img { max-width: none; /* we need to overide the img { max-width: 100%; } to display the controls correctly */ } 

这个问题只发生在iPad上。

我在Chrome中试过，问题是一样的，所以和Safari没有关系。

在我的电脑一切正常。