• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Aktualisieren der Position auf Google Maps

S

svenfried

New member
Hallo zusammen,

nachdem mich die Suchfunktion nicht wirklich weitergebracht hat, versuche ich, meine Frage zu erläutern:

In meinem Auto ist ein altes Handy verbaut, das alle 15 Sekunden die Geokoordinaten ermittelt und meinem heimischen Server per UMTS mitteilt. Mein Server zu Hause weiß also immer, wo sich mein Auto befindet.

Nun war meine Idee, dass ich Freunden, die weiter weg wohnen und die ich besuchen fahre, einen Link zu meinem Server gebe, wo sie meine aktuelle Position angezeigt bekommen. Das habe ich in Form eines CGIs realisiert, das HTML-Code generiert. Der HTML-Code sieht (vereinfacht) so aus:

HTML: 
<HTML>
<HEAD>
<meta http-equiv="refresh" content="60; URL="#">
</HEAD>
<BODY>
<FONT FACE="Arial,Helvetica"><B>Letze Positionsmeldung:</B> Di 3. Jun 16:54:22 CEST 2014 (vor einigen Sekunden)</FONT>
<BR/>
<BR/>
<iframe name="map" width="100%" height="80%" src="https://maps.google.de/maps?hl=de&q=50.000000%2C6.000000&ie=UTF8&t=&z=15&iwloc=B&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
<br/>
</body></html>

Man sieht, das CGI generiert HTML-Code, in dem die Zeit der letzten Positionsmeldung sowie die geografische Länge und Breite jeweils fest kodiert sind. Das funktioniert auch alles wunderbar. Alle 60 Sekunden wird die komplette Seite neu geladen, damit auch der IFrame sowie der Hinweis, wann die letzte Positionsmeldung eingegangen ist.

Schade ist nur, dass die komplette Seite neu geladen wird. Mir würde ja reichen, wenn der Teil mit der letzten Positionsmeldung aktualisiert wird sowie die Position des Pins auf der Google Map. Ich brauche keine bunte Linie, wo ich langgefahren bin etc., mir würde ein Update der Position auf der Karte sowie des Textes, wann der Server das letzte Update vom Auto erhalten hat, reichen.

Da ich so gar keine Ahnung von Ajax und nur wenig Ahnung von Javascript habe: hat jemand einen Tipp, wie man das mit Ajax oder Javascript alleine umsetzen könnte? Was muß das CGI dann an Code generieren?

Herzlichen Dank für jeden Tipp! Bitte bedenkt bei Aussagen à la "ganz easy, du mußt nur die Koordinaten in einem Array speichern und global exportieren", dass ihr einen Javascript-Vollhonk vor euch habt. Codeschnipsel oder konkrete Beispiele werden daher gerne genommen. ;-)

Vielen Dank!
 
Das bisschen HTML (das, nebenbei gesagt, invalide ist und v.A. keine DocType hat) neu zu laden ist jetzt nicht der Haupttraffic, den du hier generierst (und das wird durch die umstellung auf AJAX auch nicht besonders viel weniger). Der Löwenanteil wird dur das iFrame und das neue Aufbauen der Seite von Google verursacht. Das kannst du aber nur reduzieren, indem du direkt die Map API einbaust und dort direkt auf den Objekten der API arbeitest.

Da du dich selbst als "Javascript-Vollhonk" bezeichnest, würde ich schätzen, dass das außerhalb deiner Möglichkeiten liegt.

Aber als Übung kannst du das gerne auf AJAX umstellen. Als Plan würde ich sowas vorschlagen:
1. du machst eine zweite CGI, das die Koordinaten und Uhrzeit der letzten Aktualisierung im JSON -Format ausgibt.
2. du liest dir ein Tutorial zu AJAX durch.
3. du gibst deinem <iframe> ein ID und machst um die Zeitangabe ein <span> (auch mit ID) herum.
4. über window.setInterval() rufst du eine Funktion immer wieder auf, die dann den AJAX-Request startet und in dessen Callback wird dann das .src-Attribut des iFrames (mittels document.getElementById() kannst du darauf zugreifen) neu gesetzt und der Inhalt des neuen <span>s per .innerHTML überschrieben.

PS: AJAX mit nativem JS zu machen ist extrem nervig. In Framework kann dir da einen großen Teil der harten Arbeit abnehmen.
 
Hallo kkapsner,

vielen Dank für deine Tipps. Das HTML aus meinem Beitrag hatte ich abgespeckt, um den Codeblock möglichst kurz halten zu können. Dabei habe ich auch die DTD entfernt. Sorry dafür.

Ich lese mich gerade in ein Ajax-Tutorial ein und werde mal gucken, wie weit ich damit komme. Das ersetzen des "letztes Update am" scheint ja keine große Herausforderung zu sein. Das mit der Map-API werde ich, wie du schon zutreffend eingeschätzt hast, wohl nicht hinbekommen. Aber egal, man muß auch Träume haben. :)

Dankeschön!
 
Kein Problem. Wollte dich nur darauf hinweisen.

Ich meinte, dass das mit deinem jetzigen Wissensstand wahrscheinlich nicht machbar ist. Nicht, dass du das nie schaffen würdest.
Wenn du gewillt bist, deinen "Vollhonk"-Status zu verlassen, kannst du es ja trotzdem mal probieren. Der Weg ist dann zwar noch weit, aber man wächst an Herausforderungen.
Als erstes müsstest du etwas vertrauter mit den JS-Grundlagen werden (was du durch das AJAX-Zeugs werden solltest). Dann musst du dich ein bisschen mit der objektorientierten Programmierweise von JS vertraut machen (hast du schon mal OO programmiert?) und dann würde ich mir ein Tutorial zu der Map-API ansehen. Du hättest also noch eine gewisse Wegstrecke zu bewältigen - aber unmöglich ist das nicht.

Wir können dir dann auch bei konkreten Problemen helfen.
 
Hallo kkapsner,

ich kann es selbst kaum glauben, aber ich habe es geschafft!
- Die Google-Map-APIs als externe JS-src eingebunden
- Eine Map und einen Marker angelegt (new google.maps.Map und new google.maps.Marker)
- Mittels XMLHttpRequest.open und XMLHttpRequest.send ein GET zum CGI geschickt
- Das CGI antwortet mit einer fünfzeiligen JSON-Ausgabe (der Aufbau der JSON-Antwort ist ja recht simpel)
- Ich parse die Antwort mittels JSON.parse
- Das Div mit dem Text zum letzten Statusupdate kriegt die ID lastupdate, ich aktualisiere es mittels document.getElementById("lastupdate").innerHTML
- Kartenmitte und Marker werden mittels map.panTo(new google.maps.LatLng) und marker.setPosition(new google.maps.LatLng) verschoben
- Über body onload=window.setInterval wird die Funktion, die den Ajax-Request schickt, regelmäßig erneut aufgerufen.

Kein HTML-Refresh mehr nötig. :)

Besten Dank, das war der Denkanstoß, den ich brauchte!!
 
Du hast uns belogen: du bist sicher kein "Javascript-Vollhonk"! ;)

Wenn du willst, kannst du hier noch einen Code zeigen. Für kommende Suchende.

PS: Bitte - gern geschehen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben