Internet Explorer 9 ve 10'da haritayı göstermeyen Google yol tarifi

Question

Internet Explorer 9 ve 10'da Google'ın yol haritasını göstermek için büyük bir sorun yaşıyorum (11 sürümü iyi çalışıyor).

HTML:

<div id="dtl-directions-ctn" class="directions-ctn"> 
    <table style="width: 100%; height: 100%;"> 
     <tr class="header-ctn"> 
      <td> 
       <table style="width: 100%;"> 
        <tr> 
         <td class="title">Direções para: </td> 
         <td id="dtl-directions-partner-name" class="name lp-clr-orange"></td> 
         <td id="dtl-directions-close-btn" class="close-ctn lp-clr-orange">X</td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <table style="width: 100%; height: 100%;"> 
        <tr style="height: 100%"> 
         <td id="dtl-directions-map-canvas" class="dtl-map-ctn"></td> 
         <td id="dtl-directions-panel" class="directions-panel"></td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
</div> 

JS:

var _locationLatitude = $("#sch-location-latitude-fld").val(); 
var _locationLongitude = $("#sch-location-longitude-fld").val(); 
var _partnerLatitude = $("#dtl-partner-latitude-fld").val(); 
var _partnerLongitude = $("#dtl-partner-longitude-fld").val(); 

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

Css:

/* Directions */ 
.directions-ctn { 
    display: none; 
    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 { 
    width: 50%; 
    height: 100%; 
    display: inline-block; 
    vertical-align: top; 
    overflow-y: auto; 
    padding-left: 7px; 
} 

.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: 100%; 
    display: inline-block; 
    vertical-align: top; 
    margin-right: -4px; 
} 

.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 */ 
} 

Ben haritanın kabın ebeveynler üzerinde Height: 100% eklemek için çalıştı ama İşe yaramıyor.

http://lp-qa.izigo.pt adresinde canlı bir çalışma örneğini ilk açılan sayfada "Pneus" seçeneğini "Onde?" (nerede?) "Lisboa" koyup ilk seçeneği seçtikten sonra, aramadan sonra bir işaretçiyi tıklayın ve "Obje Direções" i seçin (yol tarifi alın).

Sol taraftaki harita IE9 ve IE10'da görünmeyecektir. İşte

---

olur:

Ben sabit bir birine 100 den% yüksekliği değişti:

.directions-ctn .dtl-map-ctn { 
    width: 50%; 
    /*height: 100%;*/ 
    height: 748px; 
    display: inline-block; 
    vertical-align: top; 
    margin-right: -4px; 
} 

Answer 1

harita kapsayıcı olarak td kullanmayın . Bunun yerine td içine bir div koyun ve sabit yükseklik ayarlayın.

HTML değişiklikleri:

<td class="dtl-map-ctn"><div id="dtl-directions-map-canvas"></div></td> 

CSS değişiklikleri:

#dtl-directions-map-canvas { 
    height: 470px; 
} 

Bir çalışma örneği http://jsfiddle.net/e86d5q35/5/

Answer 2

Thor'un cevabı alternatif üstünde bir meta etiket ve geçerli bir DOC tipi olurdu senin html. Bu IE v9 ve 10'un Edge gibi hareket etmesini kolay bir düzeltmeyle sonuçlandıracaktır. Sayfanın üst kısmındaki böyle bir şey deneyin: eski modları düzeltme genişliği ve yüksekliği ile here

Answer 3

kullanım iframe halindeyken daha fazla bilgi için

<!DOCTYPE html> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

<iframe src="#" width="500" height="400"/>