Navigation Google Maps via HTML5

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>
Kommentare sind geschlossen