problems with ajax live search + google Maps

[svgmx5]

Hi all,

 

i'm working on a project that i have hit a wall and i require help from the community.

 

What i have is the following:

 

i have a live search in which the user can type in a building name and click submit and it will get the results for that building name as well as display the actual building on a Google map as a point.

 

The problem that i'm having is that i can get the results but i can't get the map to display at all. I've tried to do everything i know but nothing has worked.

 

I'm using google maps V3 and the Jquery Ajax function to make this.

 

Below is just a quick snippet of the code that makes the ajax call. This code snippet is in my head tags of my index.php file and it calls the URL of advnacedSearchResults.php which is the file that shows the results in the div with the class of .wamResults

 

<script type="text/javascript">
$(document).ready(function(){
$("#advancedSearch").submit(function(){

	// 'this' refers to the current submitted form
	var str = $(this).serialize();

	$.ajax({
		type: "GET",
		url: "scripts/php/advanceSearchResults.php",
		data: str,
		success: function(html){

			$(".wamResults").append(html);;

		}


	});

	return false;

});

});
</script>

 

And below is the adanceSearchResult.php which includes the google map api code

 

<?Php
$building = $_GET['building'];

$find_building = mysql_query("SELECT * FROM points WHERE name LIKE '%$building'") or die(mysql_error());
$tmp_building = mysql_fetch_assoc($find_building);

$buildingID = $tmp_building['id'];
?>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript">
function load() {
	var map = new google.maps.Map(document.getElementById("map"), {
		center: new google.maps.LatLng(0,0),
		mapTypeId: 'terrain',
		zoomControlOptions:{
			style: google.maps.ZoomControlStyle.LARGE	
		}
	});
	var infoWindow = new google.maps.InfoWindow;
	var bounds = new google.maps.LatLngBounds();				

                // Change this depending on the name of your PHP file
	downloadUrl("advanced_search.php?building=<?php echo $buildingID; ?>", 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 date = markers[i].getAttribute("date");
		var point = new google.maps.LatLng(
			parseFloat(markers[i].getAttribute("lat")),
			parseFloat(markers[i].getAttribute("lng")));
		var html = "<b>" + name + "</b><br/>Date: " + date;
		var marker = new google.maps.Marker({
			map: map,
			position: point,
			icon: '../../images/tag_point.png',
			shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
		});
							  
		bounds.extend(point);
							  
		bindInfoWindow(marker, map, infoWindow, html);
	}

	map.fitBounds(bounds);

	});  
						  
}

function bindInfoWindow(marker, map, infoWindow, html) {
	google.maps.event.addListener(marker, 'click', function() {
		infoWindow.setContent(html);
		infoWindow.open(map, marker);
		marker.setIcon('../../images/current_point.png');
	});
}

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() {}

google.maps.event.addDomListener(window, 'load', load);
</script>

 

 

Anyway, this is all i have and like i said  previousy, i can get the results to display on a table which goes below the map script but i can't get the map to display at all .

 

[svgmx5]

Also one other thing i have a problem with this is that everytime i submit the form instead of just updating it it creates another div class below the previous with the new results...

 

I hope this is enough information for someone to help me out. I would be more than happy to go into more detail if needed....just ask me

 

thanks!!