PHP Array in Google Maps Wegpunkte umwandeln

404 · 13.03.2015

Array aus Textdatei in Maps Wegpunkte umwandeln

Hallo.

Ich habe eine mehrzeilige Textdatei (location.log), deren Inhalt pro Zeile jeweils Breitengrad,Längengrad und einen Zeitstempel enthält (getrennt durch ein Semikolon) und z.B. so aussehen könnte:

Code:

28.7353560001,2.135545999999999;09.03.2015, 17:33
43.97364600000002,9.071567999999999;11.03.2015, 17:11
36.58204600000004,19.421511999999999;13.03.2015, 13:04

Ich würde diese Ortspositionen gerne als Route in Google Maps anzeigen lassen (erlaubt sind angeblich insges. 10 Wegpunkte).
Da die Zeilen in der Textdatei immer angehängt werden, sind sie chronologisch geordnet, d.h. die erste Zeile ist der Startpunkt. Dann kann ich also noch die letzten 9 Zeilen anzeigen lassen, wobei die letzte Zeile der Zielpunkt wäre. Und ich müsste noch was einbauen, damit es keinen Fehler gibt, wenn es mal mehr oder weniger als 10 Zielen/Wegpunkte sind.

Jede Zeile soll also als ein (Weg-)Punkt in Google Maps angezeigt werden, und der Zeitstempel könnte jeweils in der Legende des Punktes auftauchen. Letztendlich soll man anhand der Wegpunkte (ungefähr) die Route auf der Google Maps Karte nachvollziehen können.

Bei Google habe ich erfahren, dass man wohl mit php eine Art Array auslesen könnte. Dann muss ich aber die Daten des Arrays, also für jeden Wegpunkt eine Geoposition (Lat,Long) plus Zeitstempel als Legende/Name, in Javascript überführen, um die API von Google Maps überhaupt nutzen zu können.

Hier ein Beispiel für eine solche gewünschte Seite, die eine Route mit Google Maps anzeigt:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Lat long way points (LatLng)</title>
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0px; padding: 0px }
        </style>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var directionDisplay;
            var directionsService = new google.maps.DirectionsService();
            var map;

            function initialize() {
                directionsDisplay = new google.maps.DirectionsRenderer();
                var chicago = new google.maps.LatLng(41.850033, -87.6500523);
                var myOptions = {
                    zoom: 6,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: chicago
                };
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                directionsDisplay.setMap(map);
                calcRoute();
            }

// hier folgt der m.M.n. entscheidende Abschnitt mit den Geoloc-Daten


            function calcRoute() {
                var first = new google.maps.LatLng(41.396403, -123.413128); // erster Zwischenstop
                var second = new google.maps.LatLng(42.496401, -124.413126); // 2ter Zwischenstop

                var request = {
                    origin: "1521 NW 54th St, Seattle, WA 98107 ",  // Startpunkt
                    destination: "San Diego, CA",  // Endpunkt
                    waypoints: [{location: first, stopover: true},
                        {location: second, stopover: true}],
                    optimizeWaypoints: true,
                    travelMode: google.maps.DirectionsTravelMode.WALKING
                };
                directionsService.route(request, function (response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                        var route = response.routes[0];
                        var summaryPanel = document.getElementById("directions_panel");
                        summaryPanel.innerHTML = "";
                        // For each route, display summary information.
                        for (var i = 0; i < route.legs.length; i++) {
                            var routeSegment = i + 1;
                            summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
                            summaryPanel.innerHTML += route.legs[i].start_address + " to ";
                            summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
                            summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
                        }
                    } else {
                        alert("directions response " + status);
                    }
                });
            }
        </script>
    </head>
    <body onload="initialize()">
        <div id="map_canvas" style="float:left;width:70%;height:100%;"></div>
        <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
            <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
        </div>
    </body>
</html>

Nachdem ich sehr lange gesucht und als Anfänger notgedrungen in erster Linie viel mit gefundenen Code-Schnipseln herumexperimentiert habe (mit php arrays, Javascript, JSON encode...), schaffe ich es einfach nicht. Bevor ich die Sache aufgebe, wollte ich zumindest hier noch einmal nachfragen und um Hilfe bitten.

Für Hinweise zur Lösung wäre ich wirklich dankbar.

Danke.

PHP Array in Google Maps Wegpunkte umwandeln

404

Aktives Mitglied