Question

I have this weird problem where my Google Maps API script doesn’t work, no map is rendered, when I declare a DOCTYPE.

Without a DOCTYPE I get the following warning, but it works and a map is rendered:

Resource interpreted as Other but transferred with MIME type undefined.

I have no real clue to what is wrong, but I hope some wiz here might!

Here you can see the script in action without DOCTYPE:
[LINK REMOVED SINCE QUESTION IS ANSWERED]

…and here it is with DOCTYPE declared as HTML5:
[LINK REMOVED SINCE QUESTION IS ANSWERED]

JavaScript source is pretty long, but you can find it here:
[LINK REMOVED SINCE QUESTION IS ANSWERED]
But I’ve made it publicly available at http://snipt.org/yZgm2 if anyone care!

Thank you for your time!

UPDATE 1:

So, it seems like my JavaScript wasn’t the problem. But the div-element had no height or width to begin with, and for some reason it works different with or without DOCTYPE.

So new question!

Why does the following code part not work when I have declared a DOCTYPE?

var mapElement = document.getElementById(mapOptions['mapid']);
mapElement.style.width=mapOptions['width'];
mapElement.style.height=mapOptions['height'];

UPDATE 2:

Thanks to both @fivedigit and @duncan for pointing out the CSS problem. Simply adding the measurement unit solved it all!

mapElement.style.width=mapOptions['width']+'px';
mapElement.style.height=mapOptions['height']+'px';

Answer 1

The difference is that the doctype declaration makes the browser go into standard mode, rather than quirks mode. And that’s where a little bug in your JavaScript acts up.

The map is created in both instances, but when the doctype has been declared, the map’s height is 0, and the width is set to its default (100%).

You have this bit of code where you set the width and height of the map:

if(mapOptions['width'] !== false){
    mapElement.style.width=mapOptions['width'];
}
if(mapOptions['height'] !== false){
    mapElement.style.height=mapOptions['height'];
}

You forgot to specify the unit there, and in standards mode, that style rule will then be dropped. Change the code to this to make it work:

if(mapOptions['width'] !== false){
    mapElement.style.width=mapOptions['width'] + 'px';
}
if(mapOptions['height'] !== false){
    mapElement.style.height=mapOptions['height'] + 'px';
}