+ Antworten
Ergebnis 1 bis 10 von 10
  1. #1
    Registriert seit
    Feb 2018
    Ort
    Bochum
    Beiträge
    575

    Standard Darstellung einer GoogleMap-Karte

    Hallo,

    ich bin zur Zeit dabei GoogleMaps etwas zu verstehen. Grundsätzlich funktioniert es, wenn ich eine Datei erstelle und die per Web-Browser aufrufe:

    Es funktioniert aber nicht, wenn ich eine Variable vom Typ String / ~HTMLBox fülle; die HTML-Box ist in der Web-Visualisierung leer.

    In /var/log/symcon/logfile.log gibt es keine Fehlermeldung.

    Der untenstehende Code ist möglichst vereinfacht. der Inhalt steht sei auch in der Variablen und wird mit den üblichen Browsern (Safari, Chrome, Firefox) dargestellt, wenn ich diesen HTML-Code in eine Datei packen.

    Das ist der Code einer Test-Funktion zum Füllen der Variablen

    PHP-Code:
    <?

    $html 
    '
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map-canvas { height: 100% }
    </style>
    <title>GoogleMaps</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGNKlClhEx_-_GZFFQNcBvH_H_xfqv3_0"></script>
    <script type="text/javascript">
        var locations = [
            { "lat": 51.46088167, "lng": 7.15859000, info: "akt. Position" },
            { "lat": 51.46086333, "lng": 7.15856667 },
            { "lat": 51.46085333, "lng": 7.15857167 },
            { "lat": 51.46086500, "lng": 7.15856500 },
        ];
        var origin = new google.maps.LatLng(51.46088167, 7.15859000);
        var map;
        var infowindow;

        function initialize() {
            var mapOptions = {
                    center: origin,
                    zoom: 20,
                    tilt: 0,
                    mapTypeId: "satellite"
                };
            var infowindowOptions = {
                    maxWidth: 200
                };

            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
            infowindow = new google.maps.InfoWindow();
            for(i=0; i<locations.length; i++) {
                var position = new google.maps.LatLng(locations[i]["lat"], locations[i]["lng"]);
                var marker = new google.maps.Marker({
                        position: position,
                        map: map,
                    });
                google.maps.event.addListener(marker, "click", (function(marker, i) {
                        return function() {
                            if (locations[i]["info"]) {
                                infowindow.setContent(locations[i]["info"]);
                                infowindow.setOptions(infowindowOptions);
                                infowindow.open(map, marker);
                            }
                        }
                    }) (marker, i));
            }
        }
    </script>
    </head>
    <body onload="initialize()">
        <div id="map-canvas" />
    </body>
    </html>
    '
    ;

    SetValueString(29817 /*[GoogleMaps\Karte]*/ /*[GoogleMaps\Karte]*/$html);
    Ich habe schon einiges geändert aber ich komme nicht drauf, was ich ändern muss.

    Wenn ich im Body eine Ausgabe mache

    PHP-Code:
    ...
    <
    body onload="initialize()">
        <
    div id="map-canvas" />
        
    TEST
    </body
    erscheint "TEST" in der Anzeige. Es ist also vermutlich ein Problem des Aufrufs der 'initialize'-Funktion.

    Ein Versuch war, das "onload" anders auszudrücken ...
    PHP-Code:
    ...
        
    google.maps.event.addDomListener(window"load"initialize);
    </
    script>
    </
    head>
    <
    body>
        <
    div id="map-canvas"/>
    </
    body>
    </
    html
    kein Erfolgt..

    Ich muss gestehen, das in in Web-Darstellungen, besonders in der HTML-Box wenig Kenntnisse habe.

    Ich habe einen älteren Post gefunden, der relativ ähnlich ist (IP-Symcon Community Forum). Wenn ich den hier gezeigten Code nehmen, funktioniert's aber leider auch nicht.

    PHP-Code:
    <?

    $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>Standortbestimmung</title> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
      function initialize() { 
        var latlng = new google.maps.LatLng(51.46088167, 7.15859000); 
        var myOptions = { 
          zoom: 15, 
          center: latlng, 
          mapTypeId: "satellite"
        } 
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
         
        var marker = new google.maps.Marker({ 
            position: latlng, 
            map: map, 
            title:"satellite"
        });  
      } 
    </script> 
    </head> 
    <body onload="initialize()"> 
    <div id="map_canvas" style="height: 100%;"></div> 
    </body> 
    </html>
    '
    ;

    SetValueString(29817 /*[GoogleMaps\Karte]*/$html);
    Die IPS-Version 4.4

    Ist wahrscheinlich ein falscher Ansatz von mir, von daher würde ich mich über eine Hilfe freuen.

    Danke
    demel

  2. #2
    Registriert seit
    Oct 2011
    Ort
    Hattersheim (Hessen)
    Beiträge
    6,135

    Probier doch mal testhalber einfach die Seite ins User Verzeichnis zu schieben und dann aufzurufen. Ich hatte schon öfters festgestellt das es insbesondere beim Laden von Stylesheets oder JavaScript Probleme geben kann in einer HTML Box. Wenn das über das User Verzeichnis gehen sollte muss man dann mal schauen, dann geht das über Unwege auch in einer HTMLBox.

  3. #3
    Registriert seit
    Feb 2018
    Ort
    Bochum
    Beiträge
    575

    Zitat Zitat von Fonzo Beitrag anzeigen
    Probier doch mal testhalber einfach die Seite ins User Verzeichnis zu schieben und dann aufzurufen.
    wird korrekt dargestellt - konkret: ich habe unter '.../webfront/user/neo' eine Datei 'gps.html' mit dem o.g. HTML-Code angelegt und http://xxx:3777/user/neo/gps5.html aufgerufen.

    Zitat Zitat von Fonzo Beitrag anzeigen
    Wenn das über das User Verzeichnis gehen sollte muss man dann mal schauen, dann geht das über Unwege auch in einer HTMLBox.
    wie wäre das Vorgehen?

    Hintergrund für meine Versuche:

    In meinem Automower-Modul gibt es den Wunsch, die Bewegungen des Mähers darzustellen.
    Nun ist die API für GoogleMaps nicht selbsterklärend und die Übergabe der Daten muss per JavaScript erfolgen; und da man diese Funktionen (Karten Zeichen mit Punkte, Strichen und Flächen) ja immer wieder mal brauchen kann, wollte ich daraus ein Modul erstellen mit ein paar Zeichenfunktionen.
    Der Anwender holt sich "irgendwoher" die Koordinaten, ruft eine der Zeichenfunktionen auf mit den Koordinaten und ein paar Steuerinformationen) und bekommt einen String mit HTML-Code zurück.
    Das speichert er dann in einer HTML-Box-Variable und wir haben eine Karte.

    Also sind die Daten ziemlich dynamisch und es gibt theoretisch beliebig viele solcher Seiten.

  4. #4
    Registriert seit
    Oct 2011
    Ort
    Hattersheim (Hessen)
    Beiträge
    6,135

    Probier mal ein iFrame in der HTMLBox zu setzen mit Ziel die HTML Datei im User Ordner. Wenn dann alles korrekt angezeigt werden sollte müsstest Du im Fall eines Moduls dann über einen Webhook gehen statt über das User Verzeichnis. Der IFrame bleibt aber erhalten zeigt dann nur auf den Webhook statt dem User Verzeichnis, wenn es anscheinend nicht direkt in der HTMLBox mit Code darstellbar ist.

  5. #5
    Registriert seit
    Feb 2018
    Ort
    Bochum
    Beiträge
    575

    Zitat Zitat von Fonzo Beitrag anzeigen
    Probier mal ein iFrame in der HTMLBox zu setzen mit Ziel die HTML Datei im User Ordner.
    funktioniert

    Zitat Zitat von Fonzo Beitrag anzeigen
    Wenn dann alles korrekt angezeigt werden sollte müsstest Du im Fall eines Moduls dann über einen Webhook gehen
    ja mache ich, danke für den tip.

  6. #6
    Registriert seit
    Feb 2018
    Ort
    Bochum
    Beiträge
    575

    Standard Modul für GoogleMaps

    Ich habe nun meine Erfahrungen mit den GooleMaps-karten in ein Modul gegossen.

    https://github.com/demel42/IPSymconGoogleMaps.git

    Ich unterstütze nun 3 APIs:

    Maps Static API, Maps Embed API und Maps JavaScript API. Die beiden ersten API's sind relativ überschaubar, da hier über eine mehr oder minder komplexe URL mit überschaubaren Anzahl von Optionen ein statisches Bild geholt wird.

    Die Dynamische API erfordert aber etwas Javascript in der HTML-Seite, da diese Karte interaktiv ist (Zoomen, Panning etc).
    Zudem sind die Möglichkeiten der Einstellungen wesentlich umfangreicher und damit komplexer.
    Ich habe in dem Beispielen im Modul versucht die relevanten Optionen heraus zu arbeiten. Möchte man hier weitern eintauchen ist ein Studium der Dokumentation von GoogleMaps erforderlich.
    Aufgrund der Verwendung von Javascript (vermutlich) ist der Aufruf nur indirekt über ein WebHook möglich (Beispiel im Modul).

  7. #7
    Registriert seit
    Feb 2018
    Ort
    Bochum
    Beiträge
    575

    Standard Version 1.3

    • API DistanceMatrix zur Berechnung von Routen (Entfernung und Dauer) hinzugefügt
    • Korrektur von GenerateStaticMap() und GenerateEmbededMap(): Fehler bei der Formatierung von Longitude und Latitude


    demel

  8. #8
    Registriert seit
    Oct 2012
    Ort
    Mainz
    Beiträge
    72

    Klasse Modul und genau das kann ich gebrauchen für die tägliche Pendelstrecke
    Vielen Dank klappt super!
    IPS 5 Unlimited ; KNX + DMX im Neubau; Homematic im älteren Hausteil; Hikvision Cams; Logitech Squeezeserver mit RPi's für Audio; IPSView - und alles natürlich nie wirklich komplett fertig

  9. #9
    Registriert seit
    Aug 2017
    Beiträge
    41

    Hi,

    ich versuche die Fahrzeit anzuzeigen, wie wertet ihr das Ergebnis das zurückkommt aus?

  10. #10
    Registriert seit
    Feb 2018
    Ort
    Bochum
    Beiträge
    575

    Zitat Zitat von Nocturne Beitrag anzeigen
    Hi,

    ich versuche die Fahrzeit anzuzeigen, wie wertet ihr das Ergebnis das zurückkommt aus?
    Hallo,

    wenn es um die technische Auswertung geht: das ist ein json-kodierter string. Den Inhalt habe ich nicht präsent.

    Beispiel-Aufrufe finden sich in den GitHub des Moduls unter docs.

    Gruß
    demel

Ähnliche Themen

  1. Antworten: 8
    Letzter Beitrag: 11.04.18, 10:38
  2. SD Karte als Notfall Karte kopieren
    Von Helmut im Forum Allgemeine Diskussion
    Antworten: 9
    Letzter Beitrag: 12.04.17, 20:53
  3. Antworten: 7
    Letzter Beitrag: 19.01.16, 21:46
  4. Antworten: 0
    Letzter Beitrag: 01.12.12, 17:22

Stichworte