Google maps not working IE11

Question

I've just noticed Google Maps isn't working in IE 11, but works completely fine in Chrome and Firefox. Is there something obvious that I overlooked to get it to work? You can check for a live version here: link

function initialize() {


var myLatlng = new google.maps.LatLng(51.035113, 3.715104);
var mapOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    icon: "img/marker.png"
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

HTML

<div id="map-canvas"></div>

[Google Maps](https://www.google.com/maps) works fine for me on IE11. — geocodezip, Mar 17 '15 at 15:05

score 1 · Accepted Answer · answered Mar 17 '15 at 15:05

1

I think it might be because of the style sheet.

According to this website,

IE needs to know the size of the map ensure that it has been set

if you took out the style sheet for this sample code, it would stop working under IE. And I would assume the same issue caused your problem.

answered Mar 17 '15 at 15:05

kaho

4,746
1
16
24

Yes indeed, that seems to work, thanks. However, I'm working with 100% both width and height and that makes it disappear again. – Greg Mar 17 '15 at 15:15
Nevermind, `width:100%;height:100%` with a ´position:relative;` works fine! Thanks again – Greg Mar 17 '15 at 15:19
Welcome :) Let's just hopes the new IE gets better :) – kaho Mar 17 '15 at 15:36
@kaho, please note that the link given in the answer is broken. – Pupil Aug 11 '17 at 04:37
thanks, you can visit it via https://web.archive.org/web/20160305164818/http://www.easypagez.eu/maps/ieworking.html – kaho Aug 13 '17 at 23:32

score 0 · Answer 2 · answered Jun 10 '17 at 03:34

As stated by kaho, this issue is related to the styling. Your map had no specified height and width, and would therefore not appear. But even if you specified the height and width using CSS percentages, it doesn't appear in IE11 due to its behavior regarding the container of the map div. Specifically, if you want to get a full-sized map on IE11, you must specify height:100% and width:100% on all containing elements, including body and html.

See this question for a related discussion.

Google maps not working IE11

2 Answers2

Linked