The reason your local copy of sundials.kml will not be displayed is because you are using OpenLayers.Protocol.HTTP , which will not load an address like file://directory/file.kml .
But I have no idea why your hosted code is not showing. I am currently struggling with the same problem. All I can tell you is that it still doesn't work.
The Openlayers documentation explains how you can use the GML layer to load the KML layer. Unfortunately, the code snippet they provide in the documentation does not match their actual example , which uses the vector layer, like most of their other KML (and GML) examples.
In any case, I copied the example code, but changed the vector layer to var layer = new OpenLayers.Layer.GML("GML", "gml/polygon.xml"); as indicated in the documentation. Then I made local copies of Openlayers.js, polygon.xml and .css stylesheets and changed the URLs to point to my local copies. So everything is local.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>GML Doesn't Render</title> <link rel="stylesheet" href="defaultstyle.css" type="text/css"> <link rel="stylesheet" href="examplesstyle.css" type="text/css"> <script src="OpenLayers.js"></script> <script type="text/javascript"> var map; function init(){ map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} ); var layer = new OpenLayers.Layer.GML("GML", "gml/polygon.xml"); map.addLayers([wms, layer]); map.zoomToExtent(new OpenLayers.Bounds( -3.92, 44.34, 4.87, 49.55 )); } </script> </head> <body onload="init()"> <div id="map" class="smallmap"></div> </body> </html>
This does not work.
I also tried the suggestion from the documentation:
var layer = new OpenLayers.Layer.GML("KML", "kml/lines.kml", { format: OpenLayers.Format.KML, formatOptions: { 'extractStyles': true } });
This does not work.
There is even a specific example of loading “locally stored GML vector data on a base map”. It uses the same code as the documentation, so, of course, it does not work. I can’t hyperlink to it because I don’t have enough reputation to create three hyperlinks yet, but you can find it if you look in the "GML" examples.
Openlayers has a security feature that makes it difficult to load data and javascript from completely different places (and a workaround called proxyhost if you really need to do this). But I cannot figure out how this could be related when all the URLs point to the local host.
Please be gentle, this is my first post!
UPDATE: It turns out that a) it is a browser security function, not OpenLayers, and b) it does not allow a script on the local host to upload any other files to the local host, even if you are offline. Chrome / Chromium has a command-line option -allow-file-access-from-files. Using this parameter, the above examples work. Other workarounds (google them) seem tricky.