WebApps mit Frameworks entwickeln - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 318

Sie definieren eine Variable namens positionsAusgabe . Die Variable beinhaltet eine
Funktion, die die Longitude- und Latitude-Werte in den Variablen longpos und latpos
abspeichert. Abschließend setzen Sie die Höhe des Containers mit der id karte-con-
tainer , in den Sie später die Karte reinladen, auf die Höhe des Browserfensters. Dies
ist wichtig, da Sie die Karte bildschirmfüllend anzeigen lassen wollen. Nach der Defi-
nition der Variablen rufen Sie die Ermittlung der Positionsdaten über naviga-
tor.geolocation.getCurrentPosition(positionsAusgabe) auf. Soweit nichts Neues für
Sie. Sie erweitern nun den Code, der bei der Positionsbestimmung aufgerufen wird,
um die Erstellung der Google-Maps-Karte und die Zeichnung der Route. Schließen Sie
dafür, direkt nach dem Festsetzen der Höhe des Karten-Containers folgenden Code
ein:
$('#karte-container').gmap(
'displayDirections',
{
'origin': new google.maps.LatLng(latpos,longpos),
'destination': "Friedrichstr. 37, Norderney",
'travelMode': google.maps.DirectionsTravelMode.DRIVING
},
function(success, response) {
if (success) {
return new google.maps.LatLng(latpos, longpos);
} else {
alert('Die Karte und/oder Route konnte nicht geladen werden');
$('#karte-container').gmap('getService',
'DirectionsRenderer').setMap(null);
}
}
);
Listing 8.16 Die Konfiguration der Google Maps Karte inklusive der berechneten Route zu
einer definierten Adresse
Zunächst initiieren Sie die Google Maps API und setzen den Container karte-con-
tainer als Ziel der Ausgabe fest. Das Objekt gmap erweitern Sie dabei um folgende
Parameter:
displayDirections
Dieser Wert gibt an, dass eine Route angezeigt werden soll.
origin
Dies ist der Startpunkt der Route. In diesem Fall verwenden Sie hier die Werte für
Latitude und Longitude, die Sie zuvor über die Positionsbestimmung in den Vari-
ablen latpos und langpos gespeichert haben.