HTML and CSS Reference
In-Depth Information
Der Inhalt des
content
-Containers besteht lediglich aus einem weiteren Container, in
welchen Sie die Google-Maps-Karte laden werden:
<div id="karte-container"></div>
Bei der Erstellung des
head
-Bereichs haben Sie bereits alle notwendigen JavaScript-
Dateien für die Verwendung der Google Maps API eingebunden. In diesem Fall haben
Sie das mithilfe des
Google Loaders
erreicht. Mit diesem können Sie nicht nur die Google
Maps API laden, sondern z.B. auch jQuery und andere Skripte. Eine detaillierte englische
Beschreibung finden Sie unter
https://developers.google.com/loader/
. Je nach Einsatz-
zweck kann der Einsatz des Google Loaders die Geschwindigkeit Ihrer WebApp steigern,
da automatisch nur bestimmte und benötigte Komponenten geladen werden.
8
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3",{'other_params':'sensor=true'});
</script>
Insgesamt besteht das JavaScript, welches die Karte ausgibt, aus drei Teilen:
1. Positionsdaten auslesen
2. die Karte konfigurieren: Startpunkt (die im ersten Schritt ermittelte Position) und
ein Ziel festlegen
3. die Karte ausgeben
Wie auch im Beispiel der Menükarte platzieren Sie Ihr JavaScript innerhalb des
page
-
Containers ans Ende. Mit der Funktion
.on("pageshow", function () {});
setzen Sie
fest, dass der Code ausgeführt werden soll, wenn die Seite mit der
id
anfahrt
ange-
zeigt wird.
$('#anfahrt').on("pageshow", function() {
});
Das Auslesen der Positionsdaten haben Sie bereits in Kapitel 5, »Positionsbestim-
mung«, kennengelernt.
var positionsAusgabe = function(position){
var longpos = position.coords.longitude;
var latpos = position.coords.latitude;
$('#karte-container').height($(window).height());
};
navigator.geolocation.getCurrentPosition(positionsAusgabe);
Listing 8.15
Das Auslesen der Positionsdaten
Search WWH ::
Custom Search