Wie viele wissen kann man in HTML5 mit der Geolocation API Positionen bestimmen und z.B. in Google Maps bzw. Bing anzeigen lassen. Allerdings geht auch eine Navigation. Diese wollen wir exemplarisch machen und als Route von der aktuelle Positionen nach Burghausen in die ppedv Firmenzentrale routen.
Als erstes erstellen wir ein 08/15 Html-Dokument mit 2 divs für die Karte und die Navigationsanweisungen.
<div id="mapGoogle" style="width:70%;height:70%;"></div>
<div id="directionpanel"></div>
Anschließend binden wir die JQuery Bibliothek sowie den Verweis zu Google Maps ein
<script src="js/jquery-1.10.2.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
Hierbei ist zu beachten, dass in meinem Fall der “sensor” Parameter auf false steht, da ich auf meinem Laptop kein GPS besitze. Im Falle eines vorhandenen GPS kann man dies auf “true” setzen, damit wird die Positionsbestimmung genauer.
Im folgendem JavaScript wir zuerst überprüft, ob der Browser die Geolocation unterstützt und anschließend die Position ermittelt, welche wiederum die Google Maps Karte mit einer Hilfsfunktion erstellt. Dort kann der Zoomlevel der Karte wie auch der Kartentype ausgewählt werden.
1: //Geolocation vorhanden
2: if(navigator.geolocation)
3: {
4: navigator.geolocation.getCurrentPosition(function (position) {
5:
6: var latitude = position.coords.latitude;
7: var longitude = position.coords.longitude;
8:
9: //Koordinaten
10: var pos = new google.maps.LatLng(latitude, longitude);
11:
12: //Karte anzeigen
13: createMap();
Ein Marker stellt dann die aktuelle Position auf der Karte dar
//Marker aktuelle Position
var currentLocationMarker = new google.maps.Marker({
map: map,
position: pos,
visible: true,
animation: google.maps.Animation.BOUNCE,
title: "Aktuelle Position"
});
Fehlt noch das Ziel
//Marker für Ziel
var burghausenMarker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(48.16956389, 12.83053333),
title: "Burghausen"
});
Aktuelle Position zentral anzeigen
//Map zentrieren auf aktuelle Position
map.setCenter(pos);
Der Clou ist nun die sogennanten DirectionServices zu nutzen. Origin und
Destination setzen sowie den passenden Travelmode auswählen und ab gehts
//Direction
var directionService = new google.maps.DirectionsService();
var directionDisplay = new google.maps.DirectionsRenderer();
directionDisplay.setMap(map);
directionDisplay.setPanel(document.getElementById("directionpanel"));
var request = {
origin: pos,
destination: burghausenMarker.position,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionDisplay.setDirections(response);
}
});
Hier nochmal das ganze Script mit Fehlerbehandlung
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
5: <meta charset="utf-8">
6: <title>Geolocation Google Navigation</title>
7: <style>
8: html {
9: height: 100%
10: }
11: body {
12: height: 100%;
13: margin: 0;
14: }
15: </style>
16: <script src="js/jquery-1.10.2.js"></script>
17: <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
18: </head>
19: <body>
20:
21: <script>
22: $(document).ready(function () {
23:
24: //Karte
25: var map;
26:
27: function initialize() {
28: //Geolocation vorhanden
29: if(navigator.geolocation)
30: {
31: navigator.geolocation.getCurrentPosition(function (position) {
32:
33: var latitude = position.coords.latitude;
34: var longitude = position.coords.longitude;
35:
36: //Koordinaten
37: var pos = new google.maps.LatLng(latitude, longitude);
38:
39: //Karte anzeigen
40: createMap();
41:
42: //Marker aktuelle Position
43: var currentLocationMarker = new google.maps.Marker({
44: map: map,
45: position: pos,
46: visible: true,
47: animation: google.maps.Animation.BOUNCE,
48: title: "Aktuelle Position"
49: });
50:
51: //Marker für Ziel
52: var burghausenMarker = new google.maps.Marker({
53: map: map,
54: position: new google.maps.LatLng(48.16956389, 12.83053333),
55: title: "Burghausen"
56: });
57:
58: //Map zentrieren auf aktuelle Position
59: map.setCenter(pos);
60:
61: //Direction
62: var directionService = new google.maps.DirectionsService();
63: var directionDisplay = new google.maps.DirectionsRenderer();
64: directionDisplay.setMap(map);
65: directionDisplay.setPanel(document.getElementById("directionpanel"));
66:
67: var request = {
68: origin: pos,
69: destination: burghausenMarker.position,
70: travelMode: google.maps.DirectionsTravelMode.DRIVING
71: };
72:
73: directionService.route(request, function (response, status) {
74: if (status == google.maps.DirectionsStatus.OK) {
75: directionDisplay.setDirections(response);
76: }
77: });
78: });
79: }
80: else
81: {
82: //Keine Geolocation
83: noGeolocation(false);
84: }
85: }
86:
87: function noGeolocation(parameters) {
88: var errorMessage;
89: if (parameters)
90: errorMessage = "Error: Der Geolocation Service hat einen Fehler verursacht";
91: else
92: errorMessage = "Error: Ihr Browser unterstützt die Geolocation API nicht";
93:
94: alert(errorMessage);
95: }
96:
97: function createMap() {
98: var mapOptions = {
99: zoom: 10,
100: mapTypeId: google.maps.MapTypeId.ROADMAP
101: };
102: map = new google.maps.Map(document.getElementById("mapGoogle"), mapOptions);
103: }
104:
105: initialize();
106: });
107: </script>
108: <div id="mapGoogle" style="width:70%;height:70%;"></div>
109: <div id="directionpanel"></div>
110: </body>
111: </html>