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>
 
You're missing a } in the JavaScript at the bottom:

PHP: 
	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);
			});
		}
	}
 
ok, now i feel like a twit for missing that - but it still does not work. I get nothing on the page at all.
 
Change:
GDownloadUrl("phpsqlajax_genxml.php", function(data) {

To:
GDownloadUrl("phpsqlajax_genxml.php", function(data, responseCode) {

And:
var markers = xml.documentElement.getElementsByTagName("points");

To:
var points = xml.documentElement.getElementsByTagName("point");

(changes in bold)
 
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
 
The responseCode requirement is a bit of a pain to find, without it the var points line won't find anything even with my corrected one above.

Isn't programming fun? :p.
 
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