Solved: Google Maps - AJAX Issue or Variable Scope?

Hello. I've written a page that builds a Google Map (you will have to substitute in your key to get it to work in your site). It draws a map, plots two map points, draws out the polyline and everything looks nice. If I click on the marker, it does a request to Google to look up the street address for that coordinate. Very cool, actaully.

When I click it, I get what you see in the attached image "bad.jpg" - in the pop up window it gives an "undefined" message in the text box instead of the address.

If I immediately click on the marker a second time, I do get the street address (along with the coordinates, http status and accuracy rating) which you can see in Good.jpg NOTE: I have not *reloaded* the page. I've only clicked that marker a second time.

I was able to get it to work if I add a javascript Alert('hi') before the lines that say:

marker1.openInfoWindowHtml('03/27/2009 11:58<BR>This is point 1.<BR>'+ theaddress );
and
marker10.openInfoWindowHtml('03/27/2009 11:58<BR>This is point 10.<BR>'+ theaddress );

However, this is not the way it should work, from a usability standpoint.

This would lead me to believe that the first AJAX request is working correctly but that it is trying to render it too quickly with the openInfoWindowHtml - perhaps the AJAX isn't complete yet.

Any suggestions?

Thank you !!!

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD>
 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" type="text/javascript"></script>
<script type="text/javascript">
 
	var theaddress='';
 
	initialize = function() {
			
		if (GBrowserIsCompatible()) {
			// Points to be plotted 
			var points = new Array();
			var theaddress;
			
			// Initialize Map
			map = new GMap2(document.getElementById("map_canvas"));
			map.setCenter(new GLatLng(37.4319,-122.1419), 4);
			geocoder = new GClientGeocoder();
 
			// Which Map Control to Use
			map.addControl(new GLargeMapControl());
			
			// Add a scale control ?
			map.addControl(new GScaleControl());
			
			// Which Map Types
			map.addControl(new GMapTypeControl());
			
			// Add Overview Map Control 
			map.addControl(new GOverviewMapControl());
			
 
			function getAddress(overlay, latlng) {  
				if (latlng != null) {	
					address = latlng;    
					var theaddress=''; 
					geocoder.getLocations(latlng, showAddress); 
				}
			}
 
				
			function showAddress(response) {  
				// map.clearOverlays();  
				if (!response || response.Status.code != 200) {    
					alert("Status Code:" + response.Status.code);  
					theaddress = 'Unable to locate address.';  
				} 
				else {    
					place = response.Placemark[0];    
					point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);    
					// marker.openInfoWindowHtml( '<b>orig latlng:</b>' + response.name + '<br/>' +         '<b>latlng:</b>' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '<br>' +        '<b>Status Code:</b>' + response.Status.code + '<br>' +        '<b>Status Request:</b>' + response.Status.request + '<br>' +        '<b>Address:</b>' + place.address + '<br>' +        '<b>Accuracy:</b>' + place.AddressDetails.Accuracy + '<br>' +        '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);  
					theaddress = '<b>Address:</b> ' + place.address + '<br><b>coord:</b> ' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '  ' + '(stat ' + response.Status.code + ') (accur:' + place.AddressDetails.Accuracy + ')<br>';
				}
			}
 
			
			// If we have coordinates, use those
			point = new GLatLng(37.4349, -122.1219);
			marker1 = new GMarker(point);
			points.push(point);
 
			// Calculate current address and add into floater
			GEvent.addListener(marker1, "click", 
				function() {
					// theaddress = 'hi';
					point = new GLatLng(37.4349, -122.1219);
					// alert('theaddress1: ' + theaddress);
					getAddress(map, point);
					
					// alert(null);
					marker1.openInfoWindowHtml('03/27/2009 11:58<BR>This is point 1.<BR>'+ theaddress );
				});
			map.addOverlay(marker1);
 
 
			// If we have coordinates, use those
			point = new GLatLng(37.3239, -121.9299);
			marker10 = new GMarker(point);
			points.push(point);
 
			// Calculate current address and add into floater
			GEvent.addListener(marker10, "click", 
				function() {
					point = new GLatLng(37.3239, -121.9299);
					getAddress(map, point);
					marker10.openInfoWindowHtml('03/27/2009 11:58<BR>This is point 10.<BR>'+ theaddress );
				});
			map.addOverlay(marker10);
 
			
			var polyline = new GPolyline( [  
				new GLatLng(37.4349, -122.1219), new GLatLng(37.4269, -122.0819), new GLatLng(37.4179, -122.0489), 
				new GLatLng(37.3979, -122.0399), new GLatLng(37.3889, -122.0249), new GLatLng(37.3809, -122.0009), 
				new GLatLng(37.3679, -121.9899), new GLatLng(37.3509, -121.9809), new GLatLng(37.3349, -121.9569), 
				new GLatLng(37.3239, -121.9299) 
				], "#ff0000", 10);
			map.addOverlay(polyline);
		
			// Scale the zoom level to the points on the map and center between the points.
			var bounds = new GLatLngBounds();
		   	for (var i=0; i< points.length; i++) {
				  bounds.extend(points[i]);
		   	}
		   	map.setZoom(map.getBoundsZoomLevel(bounds));
		   	map.setCenter(bounds.getCenter());
 
		}
	}
</script>
</HEAD>
 
<body onload="initialize();" onunload="GUnload()">
<style>
	body,td {font-family: arial; font-size: 10pt;}
</style>
 
<div id="map_canvas" style="width: 700px; height: 500px"></div>
 
</body>
</HTML>

Open in new window

Bad.JPG
Good.JPG