Avatar of 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 );
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">
<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);
			// 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 );
			// If we have coordinates, use those
			point = new GLatLng(37.3239, -121.9299);
			marker10 = new GMarker(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 );
			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);
			// 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++) {
<body onload="initialize();" onunload="GUnload()">
	body,td {font-family: arial; font-size: 10pt;}
<div id="map_canvas" style="width: 700px; height: 500px"></div>

Open in new window

JavaScriptGIS/GPS ProgrammingWeb Applications

Avatar of undefined
Last Comment

8/22/2022 - Mon