Parse XML file with JavaScript and plot on Google Maps

Question

Note: I am self taught (ie Google), so if my questions and explanations are silly/simple that is probably why. I'm a server guy, and have never done this type of scripting (pulling data from an URL and plotting on a map), I've only been a user. Please be kind to me.

I'm trying to parse a weather data file that is in XML format, by tag. The file comes from a aviation weather link (which is regularly updated). To test my code, I downloaded the data (about 40K), and it's one long string.

My end goal is to input the data from this link, parse through the data, finding all the coordinates and plot a marker per coordinate pair.

In the data, there is a lot data that I don't need, then the sections I wish to use. Here's an example:

<lots_of_stuff><area num_points="11"><point><longitude>-120.47</longitude><latitude>49.46</latitude></point><point><longitude>-114.13</longitude><latitude>49.17</latitude></point><point> ...

This pattern continues. The value for varies for each of the different sections. If I use small portions of the coordinate data, I can sucessfully parse/plot markers. Here is the code that works for small data snipets:

<p id="demo"></p>
<SCRIPT>
var parser, xmlDoc;
var text = "<point><longitude>-120.47</longitude><latitude>49.46</latitude></point>";

parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML = xmlDoc.getElementsByTagName("latitude")[0].childNodes[0].nodeValue +  "  " + xmlDoc.getElementsByTagName("longitude")[0].childNodes[0].nodeValue;
</SCRIPT>

I'm not showing the plot. One thing I've noticed is that if I increase the size of the data snippet, this code does not work. For example, for this value of text, the code fails and I do not know why it fails.

var text = "<point><longitude>-120.47</longitude><latitude>49.46</latitude></point><point><longitude>-114.13</longitude><latitude>49.17</latitude></point><point>";

1) Why does the above value of text cause the code to fail?

To load the URL, I am trying:

parser = new DOMParser();
var script = document.createElement('script');
script.src = 'url_for_data';
xmlDoc = parser.parseFromString(script,"text/xml");

var lat = document.getElementsById("demo").innerHTML = xmlDoc.getElementsByTagName("latitude")[0].childNodes[0].nodeValue;alert(lat);
var long = document.getElementsById("demo").innerHTML = xmlDoc.getElementsByTagName("longitude")[0].childNodes[0].nodeValue;alert(long);

I've placed alert() statments in various places to see what's going on, but am not 100% sure if what I'm seeing is correct. I know that the URL assignment is correct, but could not see the data. Could it be that the data is far too long to view? I tried to check the DOMParser limits page on this site, but cannot get to that link (could be my work connection does not allow).

I have no idea how to proceed.

2) How can I proceed?

Answer 1

I believe I've found at least a parital answer to my original question. The code below will extract the coordinates from my xml file. From here, I will need to plot it out. It's tough being a newbie sometimes.

    function myFunction(xml) {
        var x, y, i, xmlDoc, latLng;
        xmlDoc = xml.responseXML;
        x = xmlDoc.getElementsByTagName('latitude');
        y = xmlDoc.getElementsByTagName('longitude');
        for (i = 0; i < x.length; i++) { 
            latLng = x[i].childNodes[0].nodeValue + y[i].childNodes[0].nodeValue;
        }
    }

Answer 2

Here is my final code snippet that works.

   function PlotUm(xml) {
   var x, y, i, txt, xmlDoc, latLng;
   xmlDoc = xml.responseXML;
   x = xmlDoc.getElementsByTagName('latitude');
   y = xmlDoc.getElementsByTagName('longitude');alert("FOR LOOP");
   for (var i = 0; i < x.length; i++)  {
        xcoord = x[i].childNodes[0].nodeValue;
        ycoord = y[i].childNodes[0].nodeValue;
        var latLng = new google.maps.LatLng(xcoord,ycoord);
        var marker = new google.maps.Marker({
             position: latLng,
             icon: 'http://maps.google.com/mapfiles/ms/micons/pink.png',
             map: map
        });
   }
}