Loading KML file on Google map using Geoxml3

Question

My HTML is as under

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Complex</title>


<style>
   html{height:100%;}
   body{height:100%;margin:0px;font-family: Helvetica,Arial;}
</style>
<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>

<script type="text/javascript">
  jQuery(document).ready(function () {        
  var myOptions = {
    center: new google.maps.LatLng(39.397, -100.644),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var geoXml = new geoXML3.parser({
    map: map,
    singleInfoWindow: true,
    afterParse: useTheData
     });
     geoXml.parse('google_earth_tutorial_files.kml');
    }
   );

   function useTheData(doc) {
    // Geodata handling goes here, using JSON properties of the doc object
    for (var i = 0; i < doc[0].markers.length; i++) {
        // console.log(doc[0].markers[i].title);
        jQuery('#map_text').append(doc[0].markers[i].title + ', ');
    }
  };
</script>

</head>
<body >
 <form id="form1">

    <div id="map_canvas" style="width:600px;height:500px;"></div>

    <div id="map_text"></div>
    </form>
</body>
</html>

But the problem is that on my machine I get an error on developer tools

GET google_earth_tutorial_files.kml  geoxml3.js:1169
geoXML3.fetchXML geoxml3.js:1169
fetchDoc geoxml3.js:160
parse geoxml3.js:155
(anonymous function) testmypage2.html:35
n jquery.min.js:2
o.fireWith jquery.min.js:2
e.extend.ready jquery.min.js:2
c.addEventListener.B

Line 35 in my html is geoXml.parse('google_earth_tutorial_files.kml');

I don't know why this is happening. Please help. I can see the map but no KML layer gets loaded

My KML is

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0">
<Placemark>
   <name>Manfred Mustermann</name>
   <description>Manfred Mustermann</description>
   <Point>
      <coordinates>7.0964850607874,51.781641735074,0</coordinates>
   </Point>
   <address>Musterstr 29 Aachen, 52070 Nordrhein-Westfalen</address>
   <styleUrl>#0</styleUrl>
</Placemark>
</kml>

Looks like a problem in your "useTheData" function (it is a jquery error, and that is the only place I see that used). What does the KML look like? Is there a publicly accessible version somewhere? — geocodezip, Feb 28 '14 at 13:53
I have posted the KML in the question. I have also removed the code you have asked me to. I now get Uncaught TypeError: Cannot read property 'length' of undefined in useTheData in markers.length — user2837961, Feb 28 '14 at 14:05
[Works for me](http://www.geocodezip.com/geoxml3_test/v3_SO_geoxml3_jqueryError.html) — geocodezip, Feb 28 '14 at 14:17
Yes I can see. Obviously I am doing something wrong. Question - Do I run the HTML and KML file from a folder on my machine or does it have to be a webserver? If it has to be a webserver then does it make a difference if my web application is not public? — user2837961, Feb 28 '14 at 14:34
Not necessarily. The third party parser geoxml3 only requires that the KML be in the same domain, so a relative reference to a file on your local computer will work (if allowed by the security policy of the browser you are running). — geocodezip, Feb 28 '14 at 18:56

score 2 · Accepted Answer · edited May 23 '17 at 12:24

2

This answer about loading local files in Chrome might help (if you are using Chrome)
possible duplicate (about loading local files)
this google search might help.

if you can run a local web server, it doesn't matter to geoxml3 if your application is public, but you need to read the Terms of Service for Google Maps

edited May 23 '17 at 12:24

Community

1
1

answered Mar 01 '14 at 12:57

geocodezip

158,664
13
220
245

The file and the html both are in localhost/ directory – user2837961 Mar 03 '14 at 15:23
I got it working with parseKmlString since it could not find my file - Thanks – user2837961 Mar 04 '14 at 09:14

Loading KML file on Google map using Geoxml3

1 Answers1