KI Skript: Google Maps Verlauf aus Long und Lat Variable darstellen

Symcon Skripte, PHP, SQL (Fragen)
1

Morgen Zusammen,
ich habe mir ein KI-Skript „gezaubert“ das aus 2 Variablen (Breitengrad und Längengrad mit Archiv) einen Streckenverlauf darstellen soll.

Und das macht es eben nicht. Falls hier Jemand Ahnung hat was nicht passen könnte wäre ich dankbar.

Ich denke auch, das es hier auch Bedarf von anderen Usern geben könnte:

<?php

// --- KONFIGURATION ---
$googleApiKey = "xxxx hier dein API Key xxxx";

$htmlBoxID    = 12258; // ID der String-Variable mit Profil ~HTMLBox
$latVarID     = 47934; // ID der Float-Variable für Breitengrad (Latitude)
$lngVarID     = 51204; // ID der Float-Variable für Längengrad (Longitude)

$storageVarID = 42053; // ID einer String-Variable zum dauerhaften Speichern der Liste


// --- DATENVERARBEITUNG ---
$currentLat = GetValueFloat($latVarID);
$currentLng = GetValueFloat($lngVarID);

$routePoints = json_decode(GetValueString($storageVarID), true) ?? [];
$newPoint = ["lat" => $currentLat, "lng" => $currentLng];

if (empty($routePoints) || end($routePoints) !== $newPoint) {
    $routePoints[] = $newPoint;
    if (count($routePoints) > 300) array_shift($routePoints);
    SetValueString($storageVarID, json_encode($routePoints));
}

// --- DATEIPFADE KORRIGIEREN ---
// Wir nutzen den 'user' Ordner im Webfront, da dieser für eigene HTML-Dateien vorgesehen ist
$userDir = IPS_GetKernelDir() . "webfront" . DIRECTORY_SEPARATOR . "user" . DIRECTORY_SEPARATOR;
if (!is_dir($userDir)) mkdir($userDir, 0777, true);

$filename = $userDir . "google_map_route.html";
$jsonPoints = json_encode($routePoints);

// --- HTML INHALT ---
$htmlContent = <<<HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>html, body, #map { height: 100%; margin: 0; padding: 0; }</style>
</head>
<body>
    <div id="map"></div>
    <script>
        function initMap() {
            const pathData = $jsonPoints;
            if (pathData.length === 0) return;
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 12, center: pathData[pathData.length - 1]
            });
            new google.maps.Polyline({
                path: pathData, geodesic: true, strokeColor: "#FF0000", strokeWeight: 3, map: map
            });
            const bounds = new google.maps.LatLngBounds();
            pathData.forEach(p => bounds.extend(p));
            map.fitBounds(bounds);
        }
    </script>
    <script async defer src="maps.googleapis.com"></script>
</body>
</html>
HTML;

// Datei schreiben
file_put_contents($filename, $htmlContent);

// --- AUSGABE IN HTMLBOX ---
// WICHTIG: Der Pfad im Browser muss nun mit /user/ beginnen
$iframeCode = '<iframe src="/user/google_map_route.html?t=' . time() . '" style="width:100%; height:500px; border:none;"></iframe>';
SetValueString($htmlBoxID, $iframeCode);

Vielen Dank für Eure Mühe

2

Spannende Challenge :slight_smile:

Meine KI sagt mir:

image
image1686×463 53.3 KB

Und verbessert den Code wie folgt:

<?php

// --- KONFIGURATION ---
$googleApiKey = "AIza...";
$htmlBoxID    = 47929; // ID der String-Variable mit Profil ~HTMLBox
$latVarID     = 44810; // ID der Float-Variable für Breitengrad (Latitude)
$lngVarID     = 22341; // ID der Float-Variable für Längengrad (Longitude)
$storageVarID = 33799; // ID einer String-Variable zum dauerhaften Speichern der Liste

// --- DATENVERARBEITUNG ---
$currentLat = GetValueFloat($latVarID);
$currentLng = GetValueFloat($lngVarID);

// Bestehende Route laden oder neues Array starten
$routePoints = json_decode(GetValueString($storageVarID), true) ?? [];
$newPoint = ["lat" => $currentLat, "lng" => $currentLng];

// Nur speichern, wenn sich die Position geändert hat
if (empty($routePoints) || end($routePoints) !== $newPoint) {
    $routePoints[] = $newPoint;

    // Limit auf 300 Punkte (verhindert Überlauf der Variable)
    if (count($routePoints) > 300) {
        array_shift($routePoints);
    }
    SetValueString($storageVarID, json_encode($routePoints));
}

// --- DATEIPFADE KORRIGIEREN ---
// Der Pfad ist nun direkt im Root der 'user' Ordner
$userDir = IPS_GetKernelDir() . "user" . DIRECTORY_SEPARATOR;
if (!is_dir($userDir)) {
    mkdir($userDir, 0777, true);
}

$filename = $userDir . "google_map_route.html";
$jsonPoints = json_encode($routePoints);

// --- HTML INHALT ---
$htmlContent = <<<HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Standort Route</title>
    <style>
        html, body, #map { height: 100%; margin: 0; padding: 0; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        function initMap() {
            const pathData = $jsonPoints;
            if (pathData.length === 0) return;

            // Karte erstellen, zentriert auf den letzten Punkt
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 12, 
                center: pathData[pathData.length - 1]
            });

            // Route als rote Linie zeichnen
            new google.maps.Polyline({
                path: pathData,
                geodesic: true,
                strokeColor: "#FF0000",
                strokeWeight: 3,
                map: map
            });

            // Zoom so anpassen, dass alle Punkte sichtbar sind
            const bounds = new google.maps.LatLngBounds();
            pathData.forEach(p => bounds.extend(p));
            map.fitBounds(bounds);
        }
    </script>
    <!-- Google Maps API Aufruf mit API-Key und Callback -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=$googleApiKey&callback=initMap"></script>
</body>
</html>
HTML;

// Datei auf Festplatte schreiben
file_put_contents($filename, $htmlContent);

// --- AUSGABE IN HTMLBOX ---
// IFrame generieren. Der Zeitstempel (time()) verhindert Browser-Caching der Karte.
$iframeCode = '<iframe src="/user/google_map_route.html?t=' . time() . '" style="width:100%; height:500px; border:none;"></iframe>';
SetValueString($htmlBoxID, $iframeCode);

Das Ergebnis sind dann so aus:

image
image1382×935 325 KB

Aufgabe gelöst ? :slight_smile: Hat Spaß gemacht.

1 „Gefällt mir“
3

Danke!
Ich hatte Google Gemini verwendet.

4

Bei mir war es die KI der PHPStorm Entwicklungsumgebung. Sie basiert auf „Google Gemini 3.0 flash“.

Die KI liefert auch noch etwas Optimierungspotential gleich mit:

image
image1680×567 97.4 KB

Ich bin immer wieder hellauf begeistert :slight_smile:

2 „Gefällt mir“