Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2005
    Location
    Indiana (USA)
    Posts
    50
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Parse XML Problems

    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:
    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('/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:
    Code:
    <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>

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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)
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    Mar 2005
    Location
    Indiana (USA)
    Posts
    50
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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:
    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.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:

    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
    Code:
    var marker = createMarker(point, icons[i], fname.item(i));
    to

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

    -------------LAST UPDATE---------------------
    I figured it out. Here is the final index.htm code
    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>
    Last edited by chiefbutz; 06-18-2006 at 07:00 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •