title: KML layer in Openlayers doesn't work on localhost
body: <p>I have strange problem with rendering KML file in OpenLayers. It seems to be easy, but it's not. I've started with an example from here <a href="http://openlayers.org/dev/examples/sundials-spherical-mercator.html" rel="noreferrer">OpenLayers example</a> . I wanted to add my own KML. It didn't work. I've created a local copy of the example with absolute urls, as follows:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
      &lt;link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css" /&gt;
      &lt;link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" /&gt;
      &lt;script src="http://openlayers.org/dev/OpenLayers.js"&gt;&lt;/script&gt;            
      &lt;style type="text/css"&gt;
          html, body {
              height: 100%;
          }
          #map {
              width: 100%;
              height: 80%;
              border: 1px solid black;
          }
          .olPopup p { margin:0px; font-size: .9em;}
          .olPopup h2 { font-size:1.2em; }
      &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
  
  
          var lon = 5;
          var lat = 40;
          var zoom = 5;
          var map, select;
  
          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 sundials = new OpenLayers.Layer.Vector("KML", {
                  projection: map.displayProjection,
                  strategies: [new OpenLayers.Strategy.Fixed()],
                  protocol: new OpenLayers.Protocol.HTTP({
                      url: "http://openlayers.org/dev/examples/kml/sundials.kml",
                      format: new OpenLayers.Format.KML({
                          extractStyles: true,
                          extractAttributes: true
                      })
                  })
              });
  
              map.addLayers([wms, sundials]);
              alert("deded");
              select = new OpenLayers.Control.SelectFeature(sundials);
  
              sundials.events.on({
                  "featureselected": onFeatureSelect,
                  "featureunselected": onFeatureUnselect
              });
  
              map.addControl(select);
              select.activate();   
              map.zoomToExtent(new OpenLayers.Bounds(68.774414,11.381836,123.662109,34.628906));
          }
          function onPopupClose(evt) {
              select.unselectAll();
          }
          function onFeatureSelect(event) {
              var feature = event.feature;
              // Since KML is user-generated, do naive protection against
              // Javascript.
              var content = "&lt;h2&gt;"+feature.attributes.name + "&lt;/h2&gt;" + feature.attributes.description;
              if (content.search("&lt;script") != -1) {
                  content = "Content contained Javascript! Escaped content below.&lt;br&gt;" + content.replace(/&lt;/g, "&amp;lt;");
              }
              popup = new OpenLayers.Popup.FramedCloud("chicken", 
                                       feature.geometry.getBounds().getCenterLonLat(),
                                       new OpenLayers.Size(100,100),
                                       content,
                                       null, true, onPopupClose);
              feature.popup = popup;
              map.addPopup(popup);
          }
          function onFeatureUnselect(event) {
              var feature = event.feature;
              if(feature.popup) {
                  map.removePopup(feature.popup);
                  feature.popup.destroy();
                  delete feature.popup;
              }
          }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload="init()"&gt;
        &lt;h1 id="title"&gt;KML Layer Example&lt;/h1&gt;
  
        &lt;div id="tags"&gt;
            kml, popup, feature
        &lt;/div&gt;
  
        &lt;p id="shortdesc"&gt;
            Demonstrates loading and displaying a KML file on top of a basemap.
      &lt;/p&gt;
  
      &lt;div id="map" class="smallmap"&gt;&lt;/div&gt;
  
      &lt;div id="docs"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It doesn;t render. I tried to change KML url to my local copy of sundial.kml (<code>url: "http://openlayers.org/dev/examples/kml/sundials.kml", -&gt; url: "/sundials.kml</code>, and it didn't work either. I don't have Idea why.</p>
  
  <p>Finally I want to add my own KML files, but they do not show either. What should I do?</p>
  
  <p>Thanks in advance 
  Rafal </p>