KML Layer Example

http://openlayers.org/dev/examples/sundials.html

HTML

<script src="http://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
      <h1 id="title">KML Layer Example</h1>

      <div id="tags">
          kml, popup, feature
      </div>

      <p id="shortdesc">
          Demonstrates loading and displaying a KML file on top of a basemap.
    </p>

    <div id="map" class="smallmap"></div>

    <div id="docs"></div>

<br />

  <p>Note: Not sure why this doesn't work.  Possibly the .kml file needs to be local.  <a href="http://openlayers.org/dev/examples/sundials.html">Original
  OpenLayers Example</a>.</p>

<p>See discussion on <a href="http://gis.stackexchange.com/questions/23204/cant-seem-to-replicate-the-kml-layer-in-jsfiddle/">gis.stackoverflow with @CaptDragon</a></p>

CSS

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; }

JavaScript

(function($) {

    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: 'https://www.cendasa.com/cenda/app/aragon/dataVIEW2/GEODATA/SPC/GEODAT_1157813528.kml',
                format: new OpenLayers.Format.KML({
                    extractStyles: true,
                    extractAttributes: true
                })
            })
        });

        map.addLayers([wms, sundials]);

        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 = '<h2>' + feature.attributes.name + '</h2>' + feature.attributes.description;
        if (content.search('<script') != -1) {
            content = 'Content contained Javascript! Escaped content below.<br>' + content.replace(/</g, '&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...