# JavaScript Geolocation Tracking mit Google Maps API Hier ist der aktualisierte Blogbeitrag, in den alle Schlüsselwörter nahtlos eingebettet sind. Dies ist der Abschluss der vierteiligen Serie über die Erstellung von Live-Echtzeit-Webanwendungen mit Geolokalisierungsfunktionen mithilfe der Google Maps JavaScript API und PubNub. Unser Tutorial führt Sie durch die Benutzererfahrung bei der Erstellung von Flugrouten mit JavaScript und PubNub. Ein Beispiel dafür, wie dies alles umgesetzt wird, finden Sie in unserer [Showcase-Demo](https://showcase.pubnub.com/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=de) auf der PubNub-Website. Navigieren Sie zur Geolocation-Demo, um zu sehen, wie wir PubNub mit Echtzeit-Tracking einbinden. Den Code hinter der Demo finden Sie auf unserer [Github-Website](https://github.com/PubNubDevelopers/PubNub-Showcase/tree/main/web/geolocation). Was sind Flugpfade? ------------------- Flugpfade, wie sie in diesem **Tutorial** implementiert sind, beziehen sich auf **Polylinien**, die das **dynamische Zeichnen von Pfaden durch benutzerdefinierte Punkte** auf einer Karte ermöglichen, die sich entweder auf Ihrem **mobilen Gerät** oder im Webbrowser befindet. Sie sind integraler Bestandteil der **HTML5 Geolocation API** und der **Google Maps API** zur Verfolgung von Bewegungsmustern. Überblick über das Tutorial --------------------------- Vergewissern Sie sich, dass Sie die Voraussetzungen aus den [Teilen eins,](https://www.pubnub.com/blog/javascript-mapping-javascript-tracking/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=de) [zwei](https://www.pubnub.com/blog/javascript-google-maps-api-map-markers/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=de) und [drei](https://www.pubnub.com/blog/javascript-google-maps-api-location-publishing/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=de) erfüllt haben, , in denen wir [unsere JavaScript-Umgebung eingerichtet](https://www.pubnub.com/blog/javascript-mapping-javascript-tracking/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=de) und [Kartenmarkierungen](https://www.pubnub.com/blog/javascript-google-maps-api-map-markers/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=de) und [Standortverfolgung](https://www.pubnub.com/blog/javascript-google-maps-api-location-publishing/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=de) behandelt haben. Wenn Sie dies getan haben, fahren Sie mit dem nächsten Teil fort. Code-Walkthrough ---------------- Beginnen wir mit der Definition der \`let'-Variablen \`map\`, \`mark\` und \`lineCoords\`, um unsere Karten-, Markierungs- und **Polylinien-Koordinatenobjekte** zu speichern. Auf diese Weise können wir sie anpassen, wenn PubNub-Ereignisse eintreffen. Anschließend definieren wir den \`initialize\`-Callback, der von der [Google Maps JavaScript-API](https://developers.google.com/maps/documentation/javascript/overview) verwendet werden kann, wenn sie bereit zum Laden ist. Stellen Sie sicher, dass Sie \`YOUR\_GOOGLE\_MAPS\_API\_KEY\` durch Ihren tatsächlichen **API-Schlüssel** ersetzen. ```js let map; let mark; let lineCoords = []; let initialize = function() { map = new google.maps.Map(document.getElementById('map-canvas'), {center:{lat:lat,lng:lng},zoom:12}); mark = new google.maps.Marker({position:{lat:lat, lng:lng}, map:map}); }; window.initialize = initialize; ``` Mit dem 'redraw'-Ereignishandler aktualisieren wir nun die neuen Standortinformationen, indem wir die Methode 'getCurrentPosition()' von Geolocation aufrufen. ### Lat/Long Als Nächstes definieren wir einen "redraw"-Ereignishandler, den wir immer dann aufrufen, wenn wir ein neues Positionsänderungsereignis erhalten. Im ersten Teil der Funktion setzen wir den Breiten- und Längengrad auf die neuen Werte aus der Nachricht. Dann rufen wir die entsprechenden Methoden auf den Objekten Karte, Marker und Polylinie auf, um die Position zu aktualisieren, sie dem Ende der Linie hinzuzufügen und die Karte neu zu zentrieren. ```js var redraw = function(payload) { lat = payload.message.lat; lng = payload.message.lng; map.setCenter({lat:lat, lng:lng, alt:0}); mark.setPosition({lat:lat, lng:lng, alt:0}); lineCoords.push(new google.maps.LatLng(lat, lng)); var lineCoordinatesPath = new google.maps.Polyline({ path: lineCoords, geodesic: true, strokeColor: '#2E10FF' }); lineCoordinatesPath.setMap(map); }; ``` PubNub initialisieren --------------------- Nachdem wir unsere Callbacks definiert haben, initialisieren wir die PubNub-Echtzeitdaten-Streaming-Funktionalität, die auf **Mobiltelefonen, Tablets, Browsern** und **Laptops** über Tech-Stacks wie **iOS, Android, JavaScript, .NET, Java, Ruby, Python, PHP** und mehr funktioniert. ```js const pnChannel = "map3-channel"; const pubnub = new PubNub({ publishKey: 'YOUR_PUB_KEY', subscribeKey: 'YOUR_SUB_KEY' }); pubnub.subscribe({channels: [pnChannel]}); pubnub.addListener({message:redraw}); ``` Die PubNub-Funktionalität zum **Veröffentlichen** und **Abonnieren** von Themen in Echtzeitkanälen bietet effiziente Daten-Streaming-Funktionen. Veröffentlichung von Lat/Long ----------------------------- Für dieses einfache Tutorial richten wir einen einfachen JavaScript-Intervall-Timer ein, um neue Positionen auf der Grundlage der aktuellen Zeit zu veröffentlichen. Alle 500 Millisekunden rufen wir die anonyme Callback-Funktion auf, die ein neues Latitude/Longitude-Objekt (mit Koordinaten, die sich nach Nordosten bewegen) im angegebenen PubNub-Kanal veröffentlicht. In Ihrer Anwendung werden Sie die Position wahrscheinlich von einer Live-Geräteposition oder einem vom Benutzer gemeldeten Standort erhalten. ```js setInterval(function() { pubnub.publish({channel:pnChannel, message:{lat:window.lat + 0.001, lng:window.lng + 0.01}}); }, 500); ``` Zu guter Letzt initialisieren wir die Google Maps API, um sicherzustellen, dass die DOM-Elemente und JavaScript-Voraussetzungen erfüllt sind. ```js ``` Zusammenfassung --------------- Diese Tutorial-Serie hat uns gezeigt, wie die Google [Maps API](https://developers.google.com/maps/documentation/javascript/overview) und [PubNub](https://www.pubnub.com/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=de) außergewöhnlich gut für die Echtzeit-Standortverfolgung in Web- und Mobil-Apps zusammenarbeiten. Dies ist vergleichbar mit der Art und Weise, wie Ride-Hailing-Dienste wie **Uber** und **Lyft** die Bewegung ihrer Fahrzeuge in Echtzeit anzeigen. PubNub erleben -------------- Schauen Sie sich die [Live Tour](https://www.pubnub.com/tour/introduction/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=de) an, um in weniger als 5 Minuten die grundlegenden Konzepte hinter jeder von PubNub betriebenen App zu verstehen. Hören Sie sich die Erfahrungen unserer Nutzer direkt auf unserer [GitHub-Seite](https://github.com/PubNubDevelopers) und in den Testimonials auf unserer Website an. Einrichten ---------- Melden Sie sich für einen [PubNub-Account](https://admin.pubnub.com/#/login?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=de) an, um sofort kostenlosen Zugang zu PubNub-Schlüsseln zu erhalten. Starten Sie ----------- Die [PubNub-Dokumente](https://www.pubnub.com/docs?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=de) werden Sie unabhängig von Ihrem Anwendungsfall zum Laufen bringen. Wir haben Abschnitte, die der JavaScript Google Maps API gewidmet sind und wie man sie mit Echtzeit-Tracking in unserem SDK verwendet.