KML file not working in javascript Googlemaps when using publicly accessable URL

StackOverflow https://stackoverflow.com/questions/21999264

Question

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?

Was it helpful?

Solution

The kml loads fine. I believe your problem is a missing comma in the mapProp definition

instead of

var mapProp = {
  center:new google.maps.LatLng(49.4076800,8.6907900),
  zoom:11
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

it should be

var mapProp = {
  center:new google.maps.LatLng(49.4076800,8.6907900),
  zoom:11,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

always pay attention to the console ;)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top