KML file loads but doesn't display - why not?

Question

I have a google-maps mashup that worked fairly well with "small" test files - every file I generated, even for a 60 mile trip, was less than 16k.

Then, yesterday, a user sent me a KML file they were having problems with - it's over 360k in size and, while it uploads okay, and when I call GGeoXML(), it appears to load into Google Maps okay, but no map appears and the error "Script error. (main.js,0)" appears in the log. This happens both in my own application and if I try to feed the kml file to Google's "Code Playground" - but the file loads fine in Google Earth. If I re-save the file from Google Earth into kmz format, that also works - but since the file is no longer XML, I lose some of the "added value" features of my mashup.

I've scanned the Google documentation, but I could not find any reference to a maximum file size for kml files.

Any suggestions?

Here's a code fragment that causes the problem in the Code Playground:

var map;
function zoomToGeoXML(geoXml) {
    var center = geoXml.getDefaultCenter();
    var span = geoXml.getDefaultSpan();
    var sw = new GLatLng(center.lat() - span.lat() / 2,
                    center.lng() - span.lng() / 2);
    var ne = new GLatLng(center.lat() + span.lat() / 2,
                    center.lng() + span.lng() / 2);
    var bounds = new GLatLngBounds(sw, ne);
    map.setCenter(center);
    map.setZoom(map.getBoundsZoomLevel(bounds));
}

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    var geoXml = new GGeoXml("http://(my base url)/files/gps/expr.kml",
                function() { zoomToGeoXML(geoXml); });
    map.addOverlay(geoXml);
  }
}

Answer 1

It looks like the size limit for GGeoXml is 3MB, so there may be a problem with the KML file itself.

See Pamela's post here.

Answer 2

It turns out that the real problem isn't the file size, it's the fragment

map = new GMap2(document.getElementById("map_canvas"));
var geoXml = new GGeoXml("http://(my base url)/files/gps/expr.kml",
            function() { zoomToGeoXML(geoXml); });
map.addOverlay(geoXml);

According to the Google Map docs, you must call setCenter() immediately after constructing a new map. I didn't do that because zoomToGeoXML() does.

Unfortunately, that apparently sets up a race condition in the google map code. Changing the code to read:

map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(0,0));
var geoXml = new GGeoXml("http://(my base url)/files/gps/expr.kml",
            function() { zoomToGeoXML(geoXml); });
map.addOverlay(geoXml);

apparently solves the problem correctly. However, it has the side-effect that the map will initially be of the entire globe before zooming into the area defined by the kml file.

Answer 3

If you rearrange a few lines from Mike's example, you get rid of the "side-effect that the map will initially be of the entire globe before zooming into the area defined by the kml file."

var map;

function loadMapAndZoomToGeoXML(geoXml) {
    center = geoXml.getDefaultCenter();
    var span = geoXml.getDefaultSpan();
    var sw = new GLatLng(center.lat() - span.lat() / 2, center.lng() - span.lng() / 2);
    var ne = new GLatLng(center.lat() + span.lat() / 2, center.lng() + span.lng() / 2);
    var bounds = new GLatLngBounds(sw, ne);
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(center);
    map.setZoom(KmlMap.getBoundsZoomLevel(bounds));
    map.addOverlay(geoXml);
    map.enableScrollWheelZoom();
    map.setUIToDefault();
    map.addControl(new GLargeMapControl());
}

function initialize() {
    if (GBrowserIsCompatible()) {
        var geoXml = new GGeoXml("http://(my base url)/files/gps/expr.kml", function() { loadMapAndZoomToGeoXML(geoXml); });
    }
}

Unfortunately it ties up the business of loading the map with zooming it and centering it, but that can be refactored further. I wanted to stick to the example Mike gave as much as possible.

Answer 4

Change this in Rafe's code :

map.setZoom(KmlMap.getBoundsZoomLevel(bounds));

To this

map.setZoom(map.getBoundsZoomLevel(bounds));