I am trying to implement a kml file using javascript API but it is not working. The kml file is working when I use Google Earth. I don't seem to know where the problem is. All the other markers,Polygons etc are working. I tried running the code on my domain and it is working without any issues there. But the problems arises when I am trying to run the html file locally and kml file is in my url. I want it to run locally. please help with that.
The working url is click here to see the working code
my code is as follows
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>
<script src="http://maps.googleapis.com/maps/api/js?key={API_Key}&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(49.4076800,8.6907900),
zoom:11,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://phanishashank.com/test.kml'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" ></div>
</body>
</html>
The data in my kml file is as follows.
<kml xmlns="http://earth.google.com/kml/2.1">
<Document>
<name>Test Path</name>
<description>map in Heidelberg</description>
<Style id="blueLine">
<LineStyle>
<color>ffff0000</color>
<width>4</width>
</LineStyle>
</Style>
<Placemark>
<name>Blue Line</name>
<styleUrl>#blueLine</styleUrl>
<LineString>
<altitudeMode>relative</altitudeMode>
<coordinates>
8.645272,49.41662700000001,0
8.693593,49.408993,0
8.645667,49.416447,0
8.645178,49.416057,0
8.64531,49.415982,0
8.642668000000001,49.413872,0
8.641953000000001,49.41256,0
8.645405,49.41147599999999,0
8.647867,49.412848,0
8.667192999999999,49.408138,0
8.669862,49.409094,0
8.690248,49.410926,0
8.691844,49.411231,0
</coordinates>
</LineString>
</Placemark>
</Document>
</kml>
Any suggestions on what may be the problem?