...

View Full Version : Parse XML Problems



chiefbutz
06-18-2006, 12:13 AM
I am working to getting a google map example script to work how I want, so I can re-work it and do what I want. I THINK this is where I post, so here i go.

From the limited JS knowledge this should be working, and since it isn't my knowledge is shown to be very limited. I realize this scripting it probbaly above my level, but I am still trying. I have included all of my source and the xml file. Maybe someone can show me what I am doing wrong.

index.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Irving City Parks</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAA7iuJM2_8ISORWg4AXT32wBRi_j0U6kJrkFvY4-OX2XYmEAa76BQyaER2UJtWWAhobVPGYxbViXZLzA" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load(){
var map = new GMap(document.getElementById("map"));
var point = new GPoint(-96.926791,32.863917);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(point, 5);
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
function createMarker(point, iconname, info) {
//var icon = new GIcon(baseIcon);
//icon.image = iconname.getAttribute("image");
// var marker = new GMarker(point, icon);
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml( info )
});

return marker;
}
var request = GXmlHttp.create();
request.open("GET", "parks.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;

var points = xmlDoc.documentElement.getElementsByTagName("point");
var icons = xmlDoc.documentElement.getElementsByTagName("icon");
var info = xmlDoc.documentElement.getElementsByTagName("info");
var fname = xmlDoc.documentElement.getElementsByTagName('/parks/park/info/FullName');

for (var i = 0; i < points.length; i++) {
var point = new GPoint(parseFloat(points[i].getAttribute("lng")),
parseFloat(points[i].getAttribute("lat")));

var marker = createMarker(point, icons[i], fname.item(i));
map.addOverlay(marker);
}
}
}
request.send(null);

}


//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 800px; height:500px;"></div>

</body>

</html>

parks.xml:

<parks>
<park>
<point lng="-96.936574" lat="32.822129"/>
<icon image="green.png" class="local" />
<info>
<FullName>Austin Recreation Center</FullName>
<url>http://www.ci.irving.tx.us/parks_and_recreation/
facilities/austin_recreation_center/index.asp</url>
<address>825 East Union Bower Road</address>
<address2>Irving, Texas 75061</address2>
<phone>(972)721-2659</phone>
<img>http://www.ci.irving.tx.us/parks_and_recreation/
facilities/austin_recreation_center/images/image7.gif</img>
</info>
</park>
<park>
<point lng="-96.9330679" lat="32.871815"/>
<icon image="yellow.png" class="local" />
<info>
<FullName>Birds Fort Trail Park</FullName>
<url>http://www.ci.irving.tx.us/parks_and_recreation/
facilities/birds_fort_trail/index.asp</url>
<address>5756 N. O'Connor Blvd</address>
<address2>Irving, Texas 75039</address2>
<phone>(972)721-2659</phone>
<img>http://www.ci.irving.tx.us/parks_and_recreation/
facilities/birds_fort_trail/images/index2.jpg</img>
</info>
</park>
</parks>

Kor
06-18-2006, 06:39 AM
var fname = xmlDoc.documentElement.getElementsByTagName('/parks/park/info/FullName');

Do you really have a tag with that name? I mean do you really have a?

</parks/park/info/FullName>
...
<//parks/park/info/FullName>

I don't think so..

And maybe is a better ideea to use XML/XHTML DOM method
element.getAttributeNode(attribute).nodeValue
instead of HTML DOM
element.getAttribute(attribute)

chiefbutz
06-18-2006, 12:02 PM
As to the getElementsByTagName thing, that is how I had scene it used, so I tried it. As to the getAttributeNode thing, I used the original method that comes straight from a google example, so I just followed their lead.

index.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Irving City Parks</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAA7iuJM2_8ISORWg4AXT32wBRi_j0U6kJrkFvY4-OX2XYmEAa76BQyaER2UJtWWAhobVPGYxbViXZLzA" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load(){
var map = new GMap(document.getElementById("map"));
var point = new GPoint(-96.926791,32.863917);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(point, 5);
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
function createMarker(point, iconname, info) {
//var icon = new GIcon(baseIcon);
//icon.image = iconname.getAttribute("image");
// var marker = new GMarker(point, icon);
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml( info )
});

return marker;
}
var request = GXmlHttp.create();
request.open("GET", "parks.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;

var points = xmlDoc.documentElement.getElementsByTagName("point");
var icons = xmlDoc.documentElement.getElementsByTagName("icon");
var info = xmlDoc.documentElement.getElementsByTagName("info");
var fname = xmlDoc.documentElement.getElementsByTagName('FullName');

for (var i = 0; i < points.length; i++) {
var point = new GPoint(parseFloat(points[i].getAttribute("lng")),
parseFloat(points[i].getAttribute("lat")));

var marker = createMarker(point, icons[i], fname.item(i));
map.addOverlay(marker);
}
}
}
request.send(null);

}


//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 800px; height:500px;"></div>

</body>

</html>

That is what my code now looks like. The XML has not changed. When I output fname it says "object Element". I get that what I am trying to put out is a different object, but I have looked and tried and none of the things I found worked. Please be patient with me on this.


---------------------UPDATE-------------------------
I have it working in IE, but I need it to work in firefox too. Here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Irving City Parks</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAA7iuJM2_8ISORWg4AXT32wBRi_j0U6kJrkFvY4-OX2XYmEAa76BQyaER2UJtWWAhobVPGYxbViXZLzA" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load(){
var map = new GMap(document.getElementById("map"));
var point = new GPoint(-96.926791,32.863917);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(point, 5);
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
function createMarker(point, iconname, info) {
//var icon = new GIcon(baseIcon);
//icon.image = iconname.getAttribute("image");
// var marker = new GMarker(point, icon);
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml( info )
});

return marker;
}
var request = GXmlHttp.create();
request.open("GET", "parks.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;

var points = xmlDoc.documentElement.getElementsByTagName("point");
var icons = xmlDoc.documentElement.getElementsByTagName("icon");
var info = xmlDoc.documentElement.getElementsByTagName("info");
var fname = xmlDoc.documentElement.getElementsByTagName('FullName');

for (var i = 0; i < points.length; i++) {
var point = new GPoint(parseFloat(points[i].getAttribute("lng")),
parseFloat(points[i].getAttribute("lat")));

var marker = createMarker(point, icons[i], fname[i].text);
map.addOverlay(marker);
}
}
}
request.send(null);

}


//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 800px; height:500px;"></div>

</body>

</html>

the only change is from this

var marker = createMarker(point, icons[i], fname.item(i));

to


var marker = createMarker(point, icons[i], fname[i].text);


-------------LAST UPDATE---------------------
I figured it out. Here is the final index.htm code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Irving City Parks</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAA7iuJM2_8ISORWg4AXT32wBRi_j0U6kJrkFvY4-OX2XYmEAa76BQyaER2UJtWWAhobVPGYxbViXZLzA" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load(){
var map = new GMap(document.getElementById("map"));
var point = new GPoint(-96.926791,32.863917);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(point, 5);
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
function createMarker(point, iconname, info) {
//var icon = new GIcon(baseIcon);
//icon.image = iconname.getAttribute("image");
// var marker = new GMarker(point, icon);
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml( info )
});

return marker;
}
var request = GXmlHttp.create();
request.open("GET", "parks.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;

var points = xmlDoc.documentElement.getElementsByTagName("point");
var icons = xmlDoc.documentElement.getElementsByTagName("icon");
var info = xmlDoc.documentElement.getElementsByTagName("info");
var fname = xmlDoc.documentElement.getElementsByTagName('FullName');

for (var i = 0; i < points.length; i++) {
var point = new GPoint(parseFloat(points[i].getAttribute("lng")),
parseFloat(points[i].getAttribute("lat")));
var name = navigator.appName
if (name == "Microsoft Internet Explorer")
var marker = createMarker(point, icons[i], fname[i].text);
else
var marker = createMarker(point, icons[i], fname[i].textContent);
map.addOverlay(marker);
}
}
}
request.send(null);

}


//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 800px; height:500px;"></div>

</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum