multiple markers on google maps from xml file

Question

I am so close to get this working

My question is: how can i make the google maps read the data.xml file that is stored on my ftp server?

Th

Answer 1

The latitude and longitude is stored as content of the lat/lng-childNodes of the marker's

You may access the values via:

var latlng = new google.maps.LatLng(parseFloat(markers[i]
                                                .getElementsByTagName("lat")[0]
                                                  .firstChild.nodeValue),
                                    parseFloat(markers[i]
                                                .getElementsByTagName("lng")[0]
                                                  .firstChild.nodeValue));

Answer 2

There are three standard formats for "mapping" XML (XML stands for eXtensible Markup Language, you can do with it what you want).

• KML - content of a <coordinates> element, multiple values are possible separated by strings.

<Placemark>
    <name>name</name>
    <description>go 0.3&amp;#160;mi</description>
    <Point>
        <coordinates>-103.17619,44.09972,0</coordinates>
    </Point>
</Placemark>

example parser - geoxml3

• latitude/longitude attributes of a marker element (used in and described in Mike Williams' Google Maps Javascript API v2 tutorial)

<marker lat="44.09972" lng="-103.17619" />

Parse using code like you have posted in your question:

var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
  var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                              parseFloat(markers[i].getAttribute("lng")));
  var marker = new google.maps.Marker({position: latlng, map: map});
 }

• latitude/longitude content in separate elements

<marker>
  <latitude>44.09972</latitude>
  <longitude>-103.17619</longitude>
</marker>

Parse by getting the content of the <latitude> and <longitude> elements:

var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
  var latlng = new google.maps.LatLng(parseFloat(nodeValue(markers[i].getElementByTagName("latitude")[0])),
                                      parseFloat(nodeValue(markers[i].getElementByTagName("longitude")[0])));
  var marker = new google.maps.Marker({position: latlng, map: map});
}

from geoxml3:

//nodeValue: Extract the text value of a DOM node, with leading and trailing whitespace trimmed
function nodeValue (node) {
  var retStr="";
  if (!node) {
    return '';
  }
  if(node.nodeType==3||node.nodeType==4||node.nodeType==2){
    retStr+=node.nodeValue;
  } else if(node.nodeType==1||node.nodeType==9||node.nodeType==11){
    for(var i=0;i<node.childNodes.length;++i){
      retStr+=arguments.callee(node.childNodes[i]);
    }
  }
  return retStr;
};

question on SO about how to do this using jquery - example from that question

xml format parsed:

<marker>
  <lat>44.09972</lat>
  <lng>-103.17619</lng>
</marker>