OpenLayers: How can I add multiple KML files to the same vector layer?

Question

I'm trying to add some KML files to a vector layer using this code:

            var map = new OpenLayers.Map('map');   
            map.addLayer(new OpenLayers.Layer.OSM());
            var kml = ['kml/file1.kml','kml/file2.kml' ... 'kml/fileN.kml'];

            function createFeatures() {
                var features = [];
                for (var i=0; i<kml.length; i++) {
                        features.push(new OpenLayers.Feature.Vector(
                            new OpenLayers.Protocol.HTTP({
                                url: 'kml/file'+i+'.kml',
                                format: new OpenLayers.Format.KML()
                            }
                        )));
                }
                return features;
            }

            var vectors1 = new OpenLayers.Layer.Vector("Vector Layer 1", {
                isBaseLayer: false,
                style: { strokeWidth: 3, strokeColor: "#FF0000", fillOpacity: 0.50, fillColor: "#FF0000" }
            });
            map.addLayer(vectors1); 
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            vectors1.addFeatures(createFeatures());  

I get this error:

Uncaught TypeError: a.geometry.getBounds is not a function

Answer 1

new OpenLayers.Feature.Vector creates a single feature from a geometry, which explains the error. You would need to load each kml, which would be an asynchronous operation, and when loaded read the features and add them to the layer. Here's some very basic code:

        var map = new OpenLayers.Map('map');   
        map.addLayer(new OpenLayers.Layer.OSM());
        var kml = ['kml/file1.kml','kml/file2.kml' ... 'kml/fileN.kml'];

        var vectors1 = new OpenLayers.Layer.Vector("Vector Layer 1", {
            isBaseLayer: false,
            style: { strokeWidth: 3, strokeColor: "#FF0000", fillOpacity: 0.50, fillColor: "#FF0000" }
        });
        map.addLayer(vectors1); 
        map.addControl(new OpenLayers.Control.LayerSwitcher());

        var format = new OpenLayers.Format.KML({
            externalProjection: new OpenLayers.Projection('EPSG:4326'),
            internalProjection: new OpenLayers.Projection('EPSG:900913')
        });

        function loadKML(url) {
            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
                var features = format.read(xhr.responseText);
                console.log(features);
                vectors1.addFeatures(features);
            }
            xhr.open("GET", url, true);
            xhr.send();
        }

        for (var i=0; i<kml.length; i++) {
            loadKML(kml[i]);
        }