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

<?

$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


...
<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 …


...
    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.


<?

$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

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.

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.

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.

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.

funktioniert

ja mache ich, danke für den tip.

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).

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

demel

Klasse Modul und genau das kann ich gebrauchen für die tägliche Pendelstrecke :smiley:
Vielen Dank klappt super!

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

@demel42 erstmal danke für das Tolle Modul,

Aber nun zu meiner Frage:
Das Lizensmodell von Google hat sich ja seit letzten Jahr geändert, wie sieht die Verwendung der API nach der Testphase aus. Können dann noch Funktionen wir die Routen Berechnung und anzeige kostenlos verwendet werden?

Gruß: Swen

Hallo,

kostenlos ist (meine ich) nicht mehr viel, nur die static Maps(?). Aber es gibt ja die Anmeldung mit dem 200$ Guthaben/Monat - schau mal in dem README des Moduls unter 6. - GoogleMaps.
Ich bin habe das Konto seit der Umstellung bei Google (also gut 1 Jahr) und bin noch nie auch nur annähernd an diese Grenze gekommen.

demel

Ja bei mir kam oben jetzt das ich auf das Kostenpflichtige Modell umstellen musste, war noch im Trial?

Bin mir halt nicht sicher ob das für mich jetzt auch gilt, und wollte deshalb hier kurz mal nachfragen, finde im meinen Profil auch nichts zu den 200$, werden die einfach pauschal abgezogen?

Swen

hallo,

wenn du auf den link im README klickst, kommst du ja auf due seite mit den preisen.
in meinem konto hab ich keine spezielle info über diesen rabatt.

demel

OK, Danke hatte ich bereits gesehen.

Hallo,
seit dem Update des GoogleMaps Moduls auf 1.11 bekomme ich folgende Fehlermeldung:

Fatal error:  Uncaught TypeError: number_format() expects parameter 1 to be float, string given in E:\IP-Symcon\modules\IPSymconGoogleMaps\libs\common.php:118
Stack trace:
#0 E:\IP-Symcon\modules\IPSymconGoogleMaps\libs\common.php(118): number_format('51.580870687307', 6, '.', '')
#1 E:\IP-Symcon\modules\IPSymconGoogleMaps\GoogleMaps\module.php(336): GoogleMaps->format_float('51.580870687307', 6)
#2 E:\IP-Symcon\scripts\__generated.inc.php(3679): GoogleMaps->GenerateStaticMap('{"center":{"lat...')
#3 E:\IP-Symcon\scripts\20644.ips.php(100): GoogleMaps_GenerateStaticMap(34943, '{"center":{"lat...')
#4 {main}
  thrown in E:\IP-Symcon\modules\IPSymconGoogleMaps\libs\common.php on line 118

Moin,

sorry, das ist eine Nebenwirkung der Umstellung auf ‚strict_types=1‘. Ist mit 1.12 gefixed.

demel

danke für den schnellen Fix, es kommt aber jetzt:

Fatal error:  Uncaught TypeError: rawurlencode() expects parameter 1 to be string, int given in E:\IP-Symcon\modules\IPSymconGoogleMaps\GoogleMaps\module.php:342
Stack trace:
#0 E:\IP-Symcon\modules\IPSymconGoogleMaps\GoogleMaps\module.php(342): rawurlencode(15)
#1 E:\IP-Symcon\scripts\__generated.inc.php(3679): GoogleMaps->GenerateStaticMap('{"center":{"lat...')
#2 E:\IP-Symcon\scripts\20644.ips.php(103): GoogleMaps_GenerateStaticMap(34943, '{"center":{"lat...')
#3 {main}
  thrown in E:\IP-Symcon\modules\IPSymconGoogleMaps\GoogleMaps\module.php on line 342

Hallo,

sorry, das ist ein bisschen das problem bei static-types, das kommt nur zu Tage, wenn man an der passenden Stelle die unpassenden Datentypen hat. Und wenn man da nicht vorbei kommt …

Ich habe eine gerade nochmal eine StaticMap testweise erstellt.

bitte aktualisieren

demel

Hallo,
vielen Dank nochmals - jetzt funzt es wieder tadellos :smiley: