Google directions not showing the map in Internet Explorer 9 and 10

Question

I'm having a big problem to show the Google's directions map in Internet Explorer 9 and 10 (the version 11 works fine).

The HTML is:

<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>

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

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

I tried to insert the Height: 100% in all the parents of the map's container but it does not work.

You can see a live working example at http://lp-qa.izigo.pt in the first dropdown choose "Pneus" in the "Onde?" (means where?) put "Lisboa" and choose the first option and after the search, click on a marker and choose "Obter Direções" (get directions).

The map on the left side will not show up in IE9 and IE10.

---

Here's what happens:

I have changed the height from 100% to a fixed one:

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

Answer 1

Don't use a td as a map container. Instead put a div inside td and set fixed height.

HTML changes:

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

CSS changes:

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

A working example http://jsfiddle.net/e86d5q35/5/

Answer 2

An alternative to Thor's answer would be a meta tag and a valid DOC type at the top of your html. This would make IE v9 and 10 act like Edge resulting in an easy fix. Try something like this at the top of the page:

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

For more information on legacy modes go here