Google Maps KMZ file not rendering in IE8 and IE7

Question

I have a web app with a map in it. I've added a nice little custom map control to turn on and off different layers on the map. Currently there are only two layers, and it all works nice and fine in most browsers.

Except for IE8+7. None of the layers are showing on the map when turned on. As far as I can tell the map is loading the kmz/kml files (when preserveViewport is set to false, the map moves to the right location) but they're just not appearing. One layer contains polylines, and the other contains markers. The code I use is below:

function someFunction() {
    //code to initialise map etc goes here...
    var layers = [];

    //Create 1st layer
    var exchangeslayer = new google.maps.KmlLayer('http://link.to.file/exchanges.kmz'
        suppressInfoWindows: true,
        preserveViewport: true
    });
    layers.push({name: "Exchanges", layer: exchangeslayer});

    //Code to create second layer
    var nyclayer = new google.maps.KmlLayer('http://www.nyc.gov/html/dot/downloads/misc/cityracks.kml'
        suppressInfoWindows: true,
        preserveViewport: false
    });
    layers.push({name: "NY City Tracks", layer: nyclayer});

    addCustomLayerControls(layers);
}

function addCustomLayerControls(layers) {
    //there is code here that would generate the divs for the custom map control
    var container; //container is a div element created via javascript

    for (var i = 0; i < layers.length; i++) {
        this.addLayerLabelToContainer(layers[i], container);
    }

    //some more code
}

function addLayerLabelToContainer(layer, container) {
    var map; //Assume I get a reference to the map

    //some code here to make pretty labels for the map controls...
    var layerLabel; // layerLabel is a div element created via javascript

    google.maps.event.addDomListener(layerLabel, 'click', function() {
        if(layer.layer.map == null) {
            layer.layer.setMap(map);
        } else {
            layer.layer.setMap(null);
        }
    });
}

Answer 1

So as it turns out my problem related to CSS. One of my stylesheets was applying max-width: 100% to all img tags. This was playing havok with the map markers/polylines.

Its obvious now that I see it, but when you think the problem is to do with the javascript its not so obvious. As such, I'll leave this answer here for anyone else who makes the same mistake as me.

Answer 2

If you modify addLayerLabelToContainer() like this then it works in IE as expected. Verified it loads KMZ correctly in IE 8 and 9.

function addLayerLabelToContainer(layer, container) {
    // var map; //Assume I get a reference to the map
    //some code here to make pretty labels for the map controls...
    var layerLabel; // layerLabel is a div element created via javascript                       

    if(layer.layer.map == null) {               
        layer.layer.setMap(map);
    } else {
        layer.layer.setMap(null);
    }
}

Don't need to invoke addDomListener(). Also note the API syntax:

addDomListener(instance:Object, eventName:string, handler:Function)

Also minor fix of syntax errors in someFunction as follows:

function someFunction() {
    // var map; //assume map is initialised, I've just removed that code
    var layers = [];

    // see https://developers.google.com/maps/documentation/javascript/layers
    //Create 1st layer
    var exchangeslayer = new google.maps.KmlLayer(
    'http://kml-samples.googlecode.com/svn/trunk/kml/kmz/simple/big.kmz',
        { suppressInfoWindows: true, preserveViewport: true
        });
    layers.push( {name: "Exchanges", layer: exchangeslayer} );

    // ...
    addCustomLayerControls(layers); 
}