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;
so why doesn't this work?
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>
Last edited:
