drawing polylines on a googlemap, fed from an SQL db

ok, been digging. I have this;

I'm trying to draw paths on a map using a dynamically generated XML file. The XML file pulls info from a mysql database, and that works fine. This is the output;

Code: 
<points>
<point lng="-122.340141" lat="47.608940"/>
<point lng="-122.344391" lat="47.613590"/>
<point lng="-122.356445" lat="47.624561"/>
<point lng="-122.337654" lat="47.606365"/>
<point lng="-122.345673" lat="47.612823"/>
<point lng="-122.340363" lat="47.605961"/>
<point lng="-122.345467" lat="47.613976"/>
<point lng="-122.326584" lat="47.617214"/>
<point lng="-122.342834" lat="47.610126"/>
</points>

so why doesn't this work?

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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps AJAX + MySQL/PHP Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAAX-CUqO0cubKhJtojraRiRTx-eFpL50MZOKTlKEkSC2EZdCmYhQLK2QaMBJa2gdkjunmrqB1elnJFw"
            type="text/javascript"></script>

    <script type="text/javascript">
    //<![CDATA[

	function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(47.614495, -122.341861), 13);

        GDownloadUrl("phpsqlajax_genxml.php", function(data) {
          var xml = GXml.parse(data);
          var line = [];
          var markers = xml.documentElement.getElementsByTagName("points");
  			for (var i = 0; i < points.length; i++) {
    			var point = points.item(i);
    			var lat  = point.getAttribute("lat");
    			var lng  = point.getAttribute("lng");

				var latlng = new GLatLng(lat, lng);

           line.push(latlng);
	       if (point.firstChild) {
	         var station = point.firstChild.nodeValue;
	         var marker = createMarker(latlng, station);
	         map.addOverlay(marker);
	       }
	     }

	     var polyline = new GPolyline(line, "#ff0000", 3, 1);
	     map.addOverlay(polyline);
	});
	//]]>
  </script>

  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>
 
ok, now i feel like a twit for missing that - but it still does not work. I get nothing on the page at all.
 
hey hey, and now it works.

i loaded it up in IE and the debugger showed another missing }

and looking through, they're all careless mistakes on my part where ive adapted the code. now I can see it working, i can work through and know why it works.

thanks
 
haha, it is. i had heaps of fun writing the mobile client that dumps the location data in the database in the first place!

I just need to look more into AJAX now, as I want the map to update when new co-ords are added to the database.

thanks again.
 
You must log in or register to reply here.
Back
Top Bottom