Java Reference
In-Depth Information
Listing 14.31■
Die Webseite mit der Referenz auf das Google Maps API
...
<script src=
"https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="lib/js/kap14_11.js"></script>
</head>
<body>
<h1>Geolokalisierung mit HTML5 und Google Maps</h1>
<div id="karte"></div>
</body>
</html>
In der Webseite inden Sie wieder die Referenz auf das Google Maps API. Die gesamte Funk-
tionalität ist ausgelagert in die im Quellcode nachfolgende (wichtig!) Datei
kap14_11.js:
Listing 14.32■
Geolokalisierung mit Google-Karten gekoppelt
function success(position) {
initialize(position.coords.latitude, position.coords.longitude);
}
function initialize(b, l) {
var latlng = new google.maps.LatLng(b, l);
var myOptions = {
zoom : 18, center : latlng, mapTypeId : google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("karte"), myOptions);
var marker = new google.maps.Marker({
position : latlng, map : map, title : "Hier beinden Sie sich"
});
}
function error(msg) {
alert(msg);
}
function init() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
alert("Fehler bei der Geolokalisierung!");
}
}
window.onload = init;
Mit
navigator.geolocation.getCurrentPosition(success, error)
bestimmen wir wie
gehabt die Koordinaten des Besuchers der Webseite und übergeben das Koordinatenobjekt
an die Funktion, die im Erfolgsfall aufgerufen wird. Diese reicht die Länge und Breite als
Parameter an die Funktion weiter, die die Karte lädt und an den ermittelten Koordinaten
zentriert und ein bisschen koniguriert (Zoomfaktor und Satellitendarstellung) sowie dort
einen Marker setzt. Das ist alles.
PrAXISTIPP:
Gerade bei mobilen Geräten ist es interessant, dass auch Ver-
änderungen der Position beobachtet werden können. Dazu gibt es die Methoden
navigator.geolocation.watchPosition()
und
navigator.geolocation.
clearWatch()
.
Search WWH ::
Custom Search