Skript funktioniert nur mit Alert

[automatix1311]

Hallo zusammen!

Vor paar Tagen habe ich von der Google Maps API Doku Seite, hier, ein Beispiel-Skript geklaut. Dann habe ich den Code auseinandergenommen und umgeschrieben, v.a. um einzelne Teil besser zu verstehen.

		var address = 'TU-Sportzentrum Dovestraße Berlin';
		var geocoder = new google.maps.Geocoder();
		var geoLocation = generateLatLng(address);
		
		function createMap() {
			var mapOptions = {
				zoom: 15,
				center: generateLatLng(address),
				mapTypeId: google.maps.MapTypeId.ROADMAP
			}
			map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
			addMarker();
		}
		function addMarker() {
			var marker = new google.maps.Marker({
				map: map,
				position: generateLatLng(address)
			});
		}
		function createGoogleMapsLink() {
			return 'http://maps.google.de/maps?' +
				'q=' + address +
				'&ll=' + generateLatLng(address).lat() + ',' + generateLatLng(address).lng();
		}
		function generateLatLng(address) {
			geocoder.geocode({'address': address}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					geoLocation = results[0].geometry.location;
					// alert(geoLocation.lat() + ' / ' + geoLocation.lng() + ' ' + status);
				} else {
					// alert('Geocode was not successful for the following reason: ' + status);
				}
			});
			return geoLocation;
		}
		function showMap() {
			var address = jQuery('#address').val();
			createMap();
			jQuery('#link').attr('href', createGoogleMapsLink());
		}
		jQuery('document').ready(function() {
			alert('Mit alert geht\'s. Ohne nicht...');
			jQuery('#address').val(address);
			showMap();
		});
		jQuery('document').ready(function() {
			jQuery('#address').change(function() {
				address = jQuery('#address').val();
				createMap();
				jQuery('#link').attr('href', createGoogleMapsLink());
			});
		});

Die komplette Date mit HTML hänge ich an.

Problem: Es funktionert nur, wenn ein Alert geworfen wird. Sonst erscheint im FireBug eni Fehler:

generateLatLng(address) is undefined

'&ll=' + generateLatLng(address).lat() + ',' + generateLatLng(address).lng();

Meine Vermutung ist, dass es ein AJAX-Problem ist, sprich, mit der Asynchronität der Aufrufe zusammenhängt. Kann bitte jemand bei der Lösung helfen? Danke!

Grüße,
Ilya

 

[Anna Bolika]

1. Du solltest wissen, dass nicht alle Skripte, die Google da auf seiner API-Seite aufführt, lauffähig sind. Als ich mich eingearbeitet habe, hab ich mir nen Wolf gesucht und dann alles ganz von vorn selbst zusammengebaut. Hatte den Vorteil, dass ich es danach verstanden hatte

2. Diese Zeile hier:
center: generateLatLng(address),
Bei mir ist es Zeile 8.

Nach meinem Verständnis von JavaScript kommt die Variable "address" hier nicht an. Du bist innerhalb einer Funktion.

 

[automatix1311]

Danke für Deine Antwort! Nichts ist perfekt und die Google API sind wohl keine Ausnahme, aber diesmal war es mein Fehler. Das Hauptproblem meines Skripts liegt darin, dass es eine Funktion gibt, die von einer asynchronen abhängig ist, jedoch früher ausgeführt wird, als diese asynchrone Funktion ein Ergebnis zurückgegeben hat.

Hier ein vereinfachtes Beispiel mit einer Log-Funktion:

		<script type="text/javascript">
		/**
		Creates an element with id = $elementId, if this has not yet existed.
		*/
		function createElement(elementId) {
			var returnElement;
			var defaultElementId = 'log';
			elementId = elementId != null ? elementId : defaultElementId;
			var foundElement = jQuery('body').find('#' + elementId);
			if (foundElement.length != 0) {
				// alert(foundElement.attr('id') + '***');
				returnElement = foundElement;
			} else {
				// alert('nothing found');
				returnElement = jQuery('<div id="' + elementId +'"><h4>Log</h4></div>');
				jQuery('body').prepend(returnElement);
			}
			// jQuery('#' + elementId).css({'background' : '#00aa00', 'height' : '100'});
			return returnElement;
		}
		/**
		Logs the message $message ind the element with id $elementId.
		*/
		function log(message, elementId) {
			var logElement = createElement(elementId);
			logElement.append('<div class="logMessage">' + message + '</div>');
		}
		/*
		Generates a geo location object from an address string $address.
		*/
		function generateLatLng(address) {
			log('start generateLatLng()');
			var geocoder = new google.maps.Geocoder();
			geocoder.geocode({'address': address}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					geoLocation = results[0].geometry.location;
					//log((geoLocation.lat() + ' / ' + geoLocation.lng() + ' ' + status));
				} else {
					//log('Geocode was not successful for the following reason: ' + status);
				}
			});
			log('stop generateLatLng()');
			return geoLocation;
		}
		jQuery('document').ready(function() {
			var address = 'TU-Sportzentrum Dovestraße Berlin';
			var geoLocation = generateLatLng(address);
			log(geoLocation);
		});
		</script>

Ausgabe:

start generateLatLng()
stop generateLatLng()
undefined

Anstatt von:

start generateLatLng()
stop generateLatLng()
(52.52030999999999, 13.319799999999987)

...was eben der Fall ist, wenn ich in der generateLatLng() ein Alert ausführe, wodurch sie ein paar Sekunden Zeit gewinnt, um die Antwort des Services abzuwarten und der log() ein sinnvolles Ergebnis zu übergeben.

Wie kann man nun diesen Code complett synchron ausführen?

 

[automatix1311]

GMap! Yes! Fine and clean realized! Yeah!

Ja, das steht in meinem GIT Commit Kommentar von eben. Also, ich hab's!

Zusammengerechnet fast vier volle Tage vorm Schirm gesessen, aber am Ende exakt das erreicht, was ich wollte, und eine ganze Menge dazugelernt!

Im Anhang nun die komplette funktionierde Version. Viel Spaß!