Google Maps performance issues with KML overlays

Question

I have an application that allows the user to draw shapes (polylines) on a map and save them to the database (via AJAX) along with some meta data (name, description, etc). I recently ported the code to use GMap APIv3 rather than v2. It appeared to be working fine, but in the last couple of weeks I've noticed some horrible performance problems when the user has many shapes (~20) with many points (80-200 per shape).

It gets so bad with the one user's map that the browser freezes up (both IE9 and the latest Chrome). This never happened when the app used v2 GMap and I can't confirm if it was always this way with v3. I'm using blitz-gmap (https://code.google.com/p/blitz-gmap-editor/) to handle the drawing elements and the following code to parse the KML and create overlays. I use the overlays to reference the shapes from another div for hiding and deleting. I can also provide the KML the causes the app to freeze, but it loads fine in both Google Earth and GMap4 (http://www.mappingsupport.com/p/gmap4.php). Am I doing something blatantly sloppy?

EDIT: Here's the KML that causes problems... http://pastebin.com/ksB6zAun Even after I've removed the 4 largest shapes (coastline shapes), it still freezes the browser.

this.setMapFromKML = function (kmlString) {
    if (kmlString.length == 0) {
        return false;
    }
    if (typeof geoXML3 == "undefined") { // check for include of geoxml3 parser
        // http://code.google.com/p/geoxml3/
        alert("geoxml3.js not included");
        return;
    }
    if (!geoXml)
        geoXml = new geoXML3.parser({
            map:mapObj,
            zoom:false,
            suppressInfoWindows:true
        });

    geoXml.parseKmlString(kmlString);
    var tmpOverlay, ovrOptions;
    for (var m = 0; m < geoXml.docs[0].placemarks.length; m++) {
        if (geoXml.docs[0].placemarks[m].Polygon) {

            tmpOverlay = geoXml.docs[0].placemarks[m].polygon;
            if (isEditable) {
                tmpOverlay.setEditable(true);
            }
            tmpOverlay.type = "polyline";
        } else if (geoXml.docs[0].placemarks[m].LineString) {

            tmpOverlay = geoXml.docs[0].placemarks[m].polyline;
            if (isEditable) {
                tmpOverlay.setEditable(true);
            }
            tmpOverlay.type = "polyline";
        } else if (geoXml.docs[0].placemarks[m].Point) {

            tmpOverlay = geoXml.docs[0].placemarks[m].marker;
            tmpOverlay.type = "marker";
        }


        var uniqueid = uniqid();
        tmpOverlay.uniqueid = uniqueid;
        if (geoXml.docs[0].placemarks[m].id) {
            tmpOverlay.id = geoXml.docs[0].placemarks[m].id;
        } else {
            tmpOverlay.id = -1;
        }
        if (geoXml.docs[0].placemarks[m].name) {
            tmpOverlay.title = geoXml.docs[0].placemarks[m].name;
        } else {
            tmpOverlay.title = "";
        }

        if (geoXml.docs[0].placemarks[m].description) {
            tmpOverlay.content = geoXml.docs[0].placemarks[m].description;
        } else {
            tmpOverlay.content = "";
        }

        //attach the click listener to the overlay
        AttachClickListener(tmpOverlay);

        //save the overlay in the array
        mapOverlays.push(tmpOverlay);
    }
    mapObj.fitBounds(geoXml.docs[0].bounds); //adjust map to show all filters
}

Answer 1

There is a significant performance penalty for making all the polylines editable (each vertex gets a draggable marker). Only allow editing of those polylines that actually need to be changed (probably only one at a time), and make them default to not editable.