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