9

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:

enter image description here

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;
}
10
  • 1
    Please provide a Minimal, Complete, Tested and Readable example that demonstrates the issue. The posted HTML is not complete.
    – geocodezip
    Jul 28, 2015 at 19:20
  • Hi, I put a live example, it did not help?
    – Patrick
    Jul 28, 2015 at 20:20
  • That works for me in IE9.
    – geocodezip
    Jul 28, 2015 at 20:37
  • :S I tested in emulation mode from IE11...
    – Patrick
    Jul 28, 2015 at 20:50
  • @geocodezip can you please try in the IE10?
    – Patrick
    Jul 28, 2015 at 21:45

3 Answers 3

4
+100

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/

3
  • Hi, Thank you very much for your help. I think I will have to do the same with the directions because in Firefox and IE they get over the TD when there are lots of directions.
    – Patrick
    Aug 6, 2015 at 10:39
  • You're welcome! Google has a lot of unexpected behaviours. One of the worst thing is to have a js-variable for a map object, with the same name as map html container has. It will brings big problems in some browsers. Aug 6, 2015 at 12:00
  • Yeah, beside the big hole between the Free Limits to the Google Maps for Works that costs 10.000$ a year.. :S I was checking out your work in your website, great job BTW ;)
    – Patrick
    Aug 6, 2015 at 12:44
1

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

3
  • Hi thank you for your help but I prefer Thor's answer because I can get more control over the platform and expected results based in a HTML solution, but thnk you anyway ;)
    – Patrick
    Aug 6, 2015 at 10:36
  • No problem. Hope the map is fixed!
    – Turtle
    Aug 6, 2015 at 12:52
  • 1
    Yes it is, I will post the final solution to help someone else ;)
    – Patrick
    Aug 6, 2015 at 13:04
-1

use iframe with fix width and height

<iframe src="#" width="500" height="400"/>
1
  • Hi, thank you for your help but I prefer Thor's answer.
    – Patrick
    Aug 6, 2015 at 10:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.