Good day,

I am trying to build a simple web 'app' where I will have a map (using the google maps api) and a few links below it as a 'filter'. I want to be filtering the data by type (ie: bar or restaurant).

Basically the map.html page uses javascript that picks up the XML which is generated by a PHP script.

here is the following code:

map.hmtl:

Code:
<!doctype html>
    <html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyASO80RjNn2d_Jjy9vdNHA5E3tfmALkWXw&sensor=false"></script>
		<script type="text/javascript">
			
			//<![CDATA[
			
			var customIcons = {
				restaurant: {
					icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
					shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
				},
				bar: {
					icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
					shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
				}
			};
			
			function load() {
				var map = new google.maps.Map(document.getElementById("map"), {
					center: new google.maps.LatLng(47.6145, -122.3418),
					zoom: 13,
					mapTypeId: 'roadmap',
					disableDefaultUI: true
				});
				var infoWindow = new google.maps.InfoWindow;
				
				// Change this depending on the name of your PHP file
				downloadUrl("genxml3.php", function(data) {
					var xml = data.responseXML;
					var markers = xml.documentElement.getElementsByTagName("marker");
					for (var i = 0; i < markers.length; i++) {
						var name = markers[i].getAttribute("name");
						var address = markers[i].getAttribute("address");
						var type = markers[i].getAttribute("type");
						var point = new google.maps.LatLng(
							parseFloat(markers[i].getAttribute("lat")),
							parseFloat(markers[i].getAttribute("lng"))
						);
						var html = "<b>" + name + "</b> <br />" + address + "<br />" + type;
						var icon = customIcons[type] || {};
						var marker = new google.maps.Marker({
							map: map,
							position: point,
							icon: icon.icon,
							shadow: icon.shadow
						});
						bindInfoWindow(marker, map, infoWindow, html);
					}
				});
				
			}
			
			
			
			function bindInfoWindow(marker, map, infoWindow, html){
				google.maps.event.addListener(marker, 'click', function(){
					infoWindow.setContent(html);
					infoWindow.open(map, marker);
				});
			}
			
			function downloadUrl(url, callback) {
				var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
				
				request.onreadystatechange = function() {
					if (request.readyState == 4) {
						request.onreadystatechange = doNothing;
						callback(request, request.status);
					}
				};
				
				request.open('GET', url, true);
				request.send(null);
			}
			
			function doNothing() {}
		
			//]]>
			
			
		</script>
	</head>
	<body onload="load()">
		<div id="map" style="width: 900px; height: 750px;"></div>
		<ul>
			<a href="#">Restaurant</a>
		</ul>
	</body>
    </html>
genxml3.php:

Code:
<?php  

    require("dbinfo.php"); 
 
    // Start XML file, create parent node

    $dom = new DOMDocument("1.0");
    $node = $dom->createElement("map");
    $parnode = $dom->appendChild($node); 

    // Opens a connection to a MySQL server

    $connection=mysql_connect('localhost', $username, $password);
    if (!$connection) {  die('Not connected : ' . mysql_error());} 

    // Set the active MySQL database

    $db_selected = mysql_select_db($database, $connection);
    if (!$db_selected) {
      die ('Can\'t use db : ' . mysql_error());
    } 

    // filtering
    //$filter = $_GET['f'];

    // Select all the rows in the markers table


    // Checks for the 'GET' variable, if there isn't, run normal XML script, if there is,     get the restriction/filter and query from the database with the filter

    if(!empty($_GET)){
	
	$filter = $_GET['f'];
	$query = "SELECT * FROM markers WHERE type = '$filter'";
	$result = mysql_query($query);
	if (!$result) {  
		die('Invalid query: ' . mysql_error());
	}
    } else {
	$query = "SELECT * FROM markers WHERE 1";
	$result = mysql_query($query);
	if (!$result) {  
		die('Invalid query: ' . mysql_error());
	}
    }

    header("Content-type: text/xml"); 

    // Iterate through the rows, adding XML nodes for each

    while ($row = @mysql_fetch_assoc($result)){  
      // ADD TO XML DOCUMENT NODE  
      $node = $dom->createElement("marker");  
      $newnode = $parnode->appendChild($node);   
      $newnode->setAttribute("name",$row['name']);
      $newnode->setAttribute("address", $row['address']);  
      $newnode->setAttribute("lat", $row['lat']);  
      $newnode->setAttribute("lng", $row['lng']);   
      $newnode->setAttribute("type", $row['type']);

    } 

    echo $dom->saveXML();

    ?>
The PHP script generates the following XML code:

Code:
<map> 
    <marker name="Pan Africa Market changed" address="1521 1st Ave, Seattle, WA"     lat="47.6089" lng="-122.34" type="restaurant"/> 
    <marker name="Buddha Thai & Bar" address="2222 2nd Ave, Seattle, WA" lat="47.6136" lng="-122.344" type="bar"/> 
    <marker name="The Melting Pot" address="14 Mercer St, Seattle, WA" lat="47.6246" lng="-122.356" type="restaurant"/> 
    <marker name="Ipanema Grill" address="1225 1st Ave, Seattle, WA" lat="47.6064" lng="-122.338" type="restaurant"/> 
    <marker name="Sake House" address="2230 1st Ave, Seattle, WA" lat="47.6128" lng="-122.346" type="bar"/> 
    <marker name="Crab Pot" address="1301 Alaskan Way, Seattle, WA" lat="47.606" lng="-122.34" type="restaurant"/> 
    <marker name="Mama's Mexican Kitchen" address="2234 2nd Ave, Seattle, WA" lat="47.614" lng="-122.345" type="bar"/> 
    <marker name="Wingdome" address="1416 E Olive Way, Seattle, WA" lat="47.6172" lng="-122.327" type="bar"/> 
    <marker name="Piroshky Piroshky" address="1908 Pike pl, Seattle, WA" lat="47.6101" lng="-122.343" type="restaurant"/> 
</map>
and when I force a "get" variable in the nav bar (ie: genxml3.php?f=restaurant) the following XML code is outputed:
Code:
<map>
    <marker name="Pan Africa Market changed" address="1521 1st Ave, Seattle, WA" lat="47.6089" lng="-122.34" type="restaurant"/>
    <marker name="The Melting Pot" address="14 Mercer St, Seattle, WA" lat="47.6246" lng="-122.356" type="restaurant"/>
    <marker name="Ipanema Grill" address="1225 1st Ave, Seattle, WA" lat="47.6064" lng="-122.338" type="restaurant"/>
    <marker name="Crab Pot" address="1301 Alaskan Way, Seattle, WA" lat="47.606" lng="-122.34" type="restaurant"/>
    <marker name="Piroshky Piroshky" address="1908 Pike pl, Seattle, WA" lat="47.6101" lng="-122.343" type="restaurant"/>
    </map>
So I know the logic in the PHP script works, because it filters the code needed. So if I put in "f=restaurant" only the markers with type "restaurant" show, and the same if I use "f=bar".

But the JavaScript still only uses the first XML code. How can I get the JavaScript code to use the second XML code (the one with the filter applied).


So what I am now looking for is a way to get the JavaScript code to run using the new XML code when a link in the map.html file is pressed?

Thank you in advance,
Josh