Positionsbestimmung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 219

Um eine Google-Karte zu Ihrer App hinzuzufügen, müssen Sie zunächst im HTML-
Code ein leeres Platzhalterelement definieren:

<section id="karte"></section>

Über CSS legen Sie die Größe des Elements fest. Anstelle einer festen Pixelgröße kön-
nen Sie sie mit einem einfachen Trick bildschirmfüllend darstellen:

5

#karte {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

Anschließend müssen Sie noch den JavaScript-Code der API einbinden:

<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

Jetzt können Sie eine Google-Karte initialisieren und darstellen lassen. Sie möchten
die Karte gleich, zentriert an der Benutzerposition, ausgeben lassen:

$(function(){
navigator.geolocation.getCurrentPosition(function(position){
meineLongitude = position.coords.longitude;
meineLatitude = position.coords.latitude;
var optionen = {
zoom: 13,
center: new google.maps.LatLng(
meineLatitude, meineLongitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
karte = new google.maps.Map(
document.getElementById('karte'), optionen);
});
});

Wie bereits in Abschnitt 5.1, »Die Positionsbestimmung mit HTML5«, beschrieben,
ermitteln Sie zunächst mit geolocation.getCurrentPosition die GPS-Koordinaten des
Benutzers. Anschließend legen Sie die Optionen der Karte in einem JavaScript-Objekt
fest - neben der Anfangszoomstufe sind dies der Kartentyp und die Anfangsposition
des Kartenausschnitts, hier die Koordinaten des Benutzers.