[jQuery Mobile] Google Map wird nur einmal geladen

moggi

Grünschnabel
Hallo,

folgendes Problem bei dem ich nicht weiterkomme:

ich habe mit dem Framework "jQuery Mobile" eine Wepapp geschrieben. In dieser Webapp gibt es eine Händerliste. Wenn man auf einen Händler klickt öffnet sich eine Detailseite mit Informationen des Händlers. Unter anderem erscheint dort auch ein Button, wo man sich den Standort des Händlers per Google Map anzeigen lassen kann. Die Koordinaten stehen in der Datenbank, werden mit PHP ausgelesen und in Variablen gespeichert. Soweit kein Problem.

Das Problem ist jetzt, wenn ich zum ersten Mal auf irgendeinen Button eines Händlers klicke, wird die Google Map erfolgreich geladen und mit Hilfe eines Markers der Standort angezeigt.
Sobald ich auf einen Button eines anderen Händlers klicke, lädt die Seite kurz, aber der Screen bleibt weiss. Navigiere ich jetzt zu dem vorherigen Händler zurück und klicke dort zum wiederholten Male den Button, wird mir plötzlich die Position des letzten Händlers angezeigt.
Aber warum? Ich weiß nicht wieso!

Zuerst dachte ich, dass die Daten (Koordinaten) nicht an die Seite übergeben werden und Google Maps somit kein Ergebnis liefern kann, aber das werden sie ja. Jetzt habe ich die Vermutung, dass die Funktion nur beim ersten Händler aufgerufen wird und auch nur dort zur Verfügung steht.

Ich weiß ehrlich gesagt nicht weiter und würde mich über jede Unterstützung freuen. Hier noch ein bisschen Code, damit ihr meine Vorgehensweise nachvollziehen könnt.

PHP:
<?php

$User="username";
$Pass="password";
$Server="localhost";
$Name="db_name";

$db = mysql_connect($Server,$User,$Pass);

if (!$db) 
	dbaseError("Datenbank-Verbindung fehlgeschlagen");

if (!mysql_select_db($Name,$db)) 
   dbaseError("Datenbank-Anwahl gescheitert");

$userID = $_GET['id'];

$sql = "SELECT company,
			   street,
			   tx_lumogooglemaps_longitude,
			   tx_lumogooglemaps_latitude
	      FROM pt_users
		 WHERE user_id = '$userID'";
					
$result = mysql_query($sql);

if (!$result) {
	die('Fehler...'.$db->error);
}

while($user = mysql_fetch_array($result)) {
	$long = $user['tx_lumogooglemaps_longitude'];
	$lat = $user['tx_lumogooglemaps_latitude'];
	$company = $user['company'];
}

?>

HTML:
<!DOCTYPE html>
<html>
<head>
	<meta charset="iso-8859-1" />
	<title>Map</title>
	<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- Full Screen Mode -->
	<meta name="apple-mobile-web-app-status-bar-style" content="grey" /> 
	<meta name= "viewport" content = "initial-scale = 1.0">
	
	<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <!-- Default Icon -->
	<link rel="apple-touch-icon" sizes="114x114" href="images/icon_iphone4.png" /> <!-- Retina Display Icon -->   
</head> 
<body>
	<div data-role="page" class="mapPage" data-theme="b" style="width:100%; height:100%;">
		
		<!-- Google Maps -->
		<script type="text/javascript">
			$(".mapPage").append('<div id="map_canvas" style="width:100%; height:100%;"></div>');
			$('.mapPage').live('pageshow',function(){		 
				function initialize() {
					var latlng = new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $long; ?>);
					var myOptions = {
						zoom: 16,
					    center: latlng,
					    mapTypeId: google.maps.MapTypeId.ROADMAP
					};
					var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
					var marker = new google.maps.Marker({
						position: latlng, 
						map: map, 
						title:"Test"
					});
				}
				initialize();
			}); // Pageshow end
		</script>
			
		<div data-role="header" data-theme="b">
			<h1><?php echo $company; ?></h1>
		</div>
	</div>
</body>
</html>
 
Zurück