Link to home
Start Free TrialLog in
Avatar of drgdrg
drgdrg

asked on

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
ASKER CERTIFIED SOLUTION
Avatar of snsargv
snsargv

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of drgdrg
drgdrg

ASKER

Outstanding!  Thank you!