Google Map不会加载/显示KML文件

Question

Another stumper for me...

Problem: Valid KML file (I checked it via a KML validator) will not render in the Google map.

Temporary link to demo: (link removed - see answer).

Relevant source code:

    var src = "geodata/path1.kml?time="+new Date().getTime();
    //var src = "geodata/westcampus.kml";

    function initialize() {
        var mapCanvas = document.getElementById("poemMap");
        var mapOptions = {
            center: new google.maps.LatLng(51.258476, -2.184906),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.HYBRID
        }
        map = new google.maps.Map(mapCanvas, mapOptions);
        loadKmlLayer(src, map);
    }

    function loadKmlLayer(src, map) {
        var kmlUrl = src;
        var kmlOptions = {
          suppressInfoWindows: false,
          preserveViewport: false,
          map: map
        };
        var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
      }

    google.maps.event.addDomListener(window, 'load', initialize);

KML file:

<?xml version="1.0" encoding="UTF-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2"
     xmlns:gx="http://www.google.com/kml/ext/2.2"
     xmlns:kml="http://www.opengis.net/kml/2.2"
     xmlns:atom="http://www.w3.org/2005/Atom"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation=
       "http://www.opengis.net/kml/2.2
        http://schemas.opengis.net/kml/2.2.0/ogckml22.xsd
        http://www.google.com/kml/ext/2.2
        https://developers.google.com/kml/schema/kml22gx.xsd
        http://www.w3.org/2005/Atom
        http://schemas.opengis.net/kml/2.2.0/atom-author-link.xsd">
<Document>
    <name>Path One</name>
    <Style id="style1">
        <IconStyle>
            <Icon>
                <href>http://maps.gstatic.com/mapfiles/ms2/micons/red-dot.png</href>
            </Icon>
        </IconStyle>
        <LineStyle>
            <color>ffff0000</color>
            <width>4</width>
        </LineStyle>
    </Style>
    <Placemark>
        <name>The Path</name>
        <description>The Path</description>
        <LineString>
            <altitudeMode>absolute</altitudeMode>
            <coordinates> 
-1.6475739999999632,54.155578,1
-1.6475739999999632,54.155578,1
-1.6475739999999632,54.155578,1
-2.146682,51.263756,1
-4.224413,51.129983,1
-0.128226,51.508419,1
-1.710998,52.193344,1
-0.119584,51.502559,1
-0.128542,51.509063,1
1.833721,42.871478,1
-2.187545,51.182921,1 
-2.242541,51.338025,1
-0.014674,51.402531,1
-3.533899,50.718412,1 
-0.797897,54.136836,1
-0.797897,54.136836,1
            </coordinates>
        </LineString>
    </Placemark>
    <Placemark>
        <name>The Muntjac</name>
        <description>1. The Muntjac</description>
        <styleUrl>#style1</styleUrl>

        <Point>
            <coordinates>-1.6475739999999632,54.155578</coordinates>
        </Point>
    </Placemark>
    ...
</Document>
</kml>

I've done this once before like this and it worked, so I'm missing something fundamental again...

Thanks for the help in advance!

Answer 1

Don't use relative URLs in the KmlOptions for a KmlLayer. Use the complete absolute URL:

var src = "http://www.jntae.com/demos/bryden/geodata/path1.kml?time=" + new Date().getTime();

working fiddle

code snippet:

 var map; var src = "http://www.jntae.com/demos/bryden/geodata/path1.kml?time=" + new Date().getTime(); function initialize() { var mapCanvas = document.getElementById("poemMap"); var mapOptions = { center: new google.maps.LatLng(51.258476, -2.184906), zoom: 10, mapTypeId: google.maps.MapTypeId.HYBRID } map = new google.maps.Map(mapCanvas, mapOptions); loadKmlLayer(src, map); } function loadKmlLayer(src, map) { var kmlUrl = src; var kmlOptions = { suppressInfoWindows: false, preserveViewport: false, map: map }; var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions); google.maps.event.addListener(kmlLayer, 'status_changed', function() { document.getElementById('status').innerHTML = kmlLayer.getStatus(); }); } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body, #poemMap { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="status"></div> <div id="poemMap"></div>