Google Maps Marker/Pointer Aktualisieren

schlucki · 16.01.2019

Guten Tag;
Ich bin neue hier und möchte mich kurz vorstellen, bevor ich zu meiner Frage/Fragen komme.
Mein Name ist Michael. komme aus Österreich/Linz und bin stolze 52 Jahre alt und beschäftige mich seit kurzem mit PHP, HTML und JS. Also bitte ich vorab schon um Entschuldigung, wenn ich eine Frage stelle die für den Profi "normal" für mich aber der absolute "Alptraum" ist*.
Zu meinem Problem:
Ich habe eine Android APP erstellt, die mir in Zeitintervallen von 5 Sek. GPS Daten auf einen Webspace speichert. Ich möchte nun diese GPS Daten, die in einer *.TXT Datei (z.B. 48.123456, 14,123456) abgelegt sind auch über eine Website abrufen und anzeigen lassen.*
Das Anzeigen und Abrufen der Daten, über die Website, funktioniert soweit schon sehr gut. Ich habe dafür viel gelesen und viel probiert, aber es funktioniert*

Nun soll aber auch die Website ca. alle 5 Sekunden aktualisiert werden, damit ich das Fahrzeug/Person "verfolgen" kann. (keine Angst ist keine Spionage APP, ich brauche das für meine Firma!) Ich habe wohl die Möglichkeit über

<meta http-equiv="refresh" content="5"/>

gefunden, jedoch wird hier immer die ganze Website neu geladen, was ich jedoch nicht möchte!
Gibt es eine "einfache" Lösung wo ich nur google maps oder die "pointer" mit den neuen GPS Daten refreshen kann? Ich denke eine Schleife oder ähnliches wäre das was ich benötige? Aber mir fehlt es hier an Erfahrung diesen Gedanken richtig umzusetzten.
Ich habe schon sehr viel im Netz gelesen, jedoch hatte ich keine zufriedenstellende Lösung gefunden, die mein "Problem" löst!? Eventuell kann mir von euch jemand einen kleinen Stups in die richtige Richtung oder einen Link wo ich die Antwort finde, geben.

Ich füge meinen HTML,PHP und JS Skrip mal an, mit dem ich bis jetzt gearbeitet habe. Bitte steinigt mich nicht, mir ist bewusst, dass gewisse Sachen vermutlich einfacher "zu schreiben" gingen, aber, wie schon mehrfach angeführt, ich bin Neuling und mit meinen Gedankengängen finde ich mich in diesen Quellcode relativ gut zu recht*

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- <meta http-equiv="refresh" content="5"/> -->

<title>Mein Titel</title>

<h1> Überschrift </h1>

<!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
		<!-- Sektor 1 GPS Daten für Pointer -->
		<?php  
		$gpsdaten = file_get_contents('gpsdaten/Sektor_1.txt');   
		?>  
		
		<script language="javascript">  
		var gpsfzg = "<?php echo $gpsdaten; ?>";  
		var res = gpsfzg.split(",");
		Sektor1_T1=res[0];
		Sektor1_T2=res[1];
		</script>
							
<!-- ENDE GPS Daten für Fahrzeug -->
<!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->


<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAA5v01sGhQl-TBXa5oRUTuZBRRPDlVThHigVAlpBtmoYerwQltWxTPLGvWHiwSXccBTGODkm08VMXoAQ"
            type="text/javascript"></script>
</head>

<body onload="initialize()" onunload="GUnload()">
	<!-- Name des DIVs, Abmessungen -->
	<div id="map-container" style="width: 950px; height: 650px"></div>
<noscript>
	Sie benötigen javaScript um diesen Inhalt betrachten zu können.
</noscript>

<script type="text/javascript">
function initialize() {

	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map-container"));

			// Ausgangsdaten konfigurieren: Laengen und Breitenangabe des Karten-Mittelpunktes; Zoomfaktor, Kartentyp (G_NORMAL_MAP, G_HYBRID_MAP, G_SATELLITE_MAP)
			map.setCenter(new GLatLng(Sektor1_T1, Sektor1_T2),12, G_SATELLITE_MAP);

				function createMarker(point,html) {
				var marker = new GMarker(point);

					// Tooltip beim Klick auf den Marker anzeigen oder nicht.
					GEvent.addListener(marker, 'click', function() {
	
		marker.openInfoWindowHtml(html);
});
return marker;
}

	// Standort Anfang
		var point = new GLatLng(Sektor1_T1,Sektor1_T2);
		var marker = createMarker(point,'Sektor 1')
		map.addOverlay(marker);
	// Standort Ende


			// Navigationselemente einblenden
			map.addControl(new GLargeMapControl());

			// Kartentypen einblenden
			map.addControl(new GMapTypeControl());

			// Übersichtskarte einblenden
			map.addControl(new GOverviewMapControl());

			// Massstab einblenden
			map.addControl(new GScaleControl());


}

}



</script>

<br></br>

<!-- Anzeige der Fahrzeug GPS Daten -->
<!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->

<?php 
	$gpsdaten = file_get_contents('gpsdaten/Sektor_1.txt');
	echo "Sektor-1 GPS-Daten:  $gpsdaten", "\n"; 
?>

<!-- ENDE -->
<!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->

<br></br>
</body>
</html>

Ich sage schon mal jetzt DANKE für eure Hilfe und Geduld mit mir
Michael

developr · 16.01.2019

Wenn du dich schon in die anderen Sprachen reingefuchst hast, dann ist jQuery für dich vermutlich auch kein Hindernis.

Du musst das nämlich mit Ajax lösen. Also per JS immer wieder eine PHP-Datei ansprechen, welche die neuen Koordinaten rausgibt. Per JS werden die Daten dann im Quellcode geändert.

Die jQuery Bibliothek einfach in head einbinden und los gehts.

Beispiel wie du einen Ajax-Aufruf startest und den Inhalt in eine CSS-ID #cssid lädst.

HTML:

<script>
		$("#cssid").load("ajax.php");
</script>

schlucki · 16.01.2019

@developr:
Danke für deine Antwort. Werde versuchen mich mal auf dieser "Schiene" schlau zu machen. Da ich aber im Moment so viele Baustellen habe (HTML, PHP, JS ....) wird es vermutlich etwas dauern, bis ich auch hier einen kleinen Einblick habe

Lg
Schlucki