[Closed] Neues FTUI Widget Kartendarstellung mit Google Maps API

Begonnen von eki, 23 Oktober 2017, 17:10:33

Vorheriges Thema - Nächstes Thema

eki

Es ist nur wichtig, dass es dann, wenn Du das gmap Widget zum ersten mal darstellst geladen wurde. Sollte also passen. Ansonsten würde da auch eine andere Fehlermeldung kommen, denke ich (bzw. wenn die css Datei nicht geladen wurde wäre nur die Darstellung etwas komisch).
Poste mal ein Listing Deines FHEM Devices (in FHEM Kommandozeile "list FahrzeitHomeArbeit").

masterpete23

hier ist es :)

Internals:
   APIKEY     apikey
   DEF        apikey 600
   INTERVAL   600
   NAME       FahrzeitHomeArbeit
   NR         192
   STATE      OK
   TRIGGERTIME 1510913826.82539
   TRIGGERTIME_FMT 2017-11-17 11:17:06
   TYPE       TRAFFIC
   VERSION    1.3.2
   READINGS:
     2017-11-17 11:07:07   delay           0 min
     2017-11-17 11:07:07   distance        9.6 km
     2017-11-17 11:07:07   duration        19 mins
     2017-11-17 11:07:07   duration_in_traffic 18 mins
     2017-11-17 11:07:07   eta             11:24:42
     2017-11-17 11:07:07   state           OK
     2017-11-17 11:07:07   status          OK
   helper:
     GoogleMapsCenter 52.2793549,10.6107024
     Poly       fXhhfkh7a3dfQXdBQkN7SHlEQWlBQT9uQEZ4SEZqSER6Rkx0TnFCYmRAV2ZGSWxATWRAUWJAfUF+
Qm1FdEdXakBTdEBLfkBBaEBAYkJmQGZRUHRLYEF0WUBkQUd2QFF+QFlwQHFAcEBjQXZATUpGWHhA
bERqQmhIakNqTGJBYEZiQWBFaEZmVGpDYEx+QHRFaEF2R2hAaER2QWBMUGBCTGhERWxFaUBoUltk
RktuQz9wQUZyQXhAZEdwQGxGaEFwSV52Q0xgQ0J2Q1NkSkl4SkB+Q0R8QkpwQlx4RVx0Q2BAckN4
RGRYekFkTF5wRExsREJ6Q09kVEFmR05wS1pkUURuRkh2RkFyQFVDT0J5RGpCbUBYfUBUfUNyQV9C
dEBtQ25Bc0N2QXVFckJjQVJtQERvQUFbRVtDaUJdY0ZpQXlATWtCT3tARWNCP3VCRnNFRHVARn1F
RmNGTmdKWl9FUH1BSGVASHVBSmNCVm9JbkFjQ1xtRWhAZUJUQmhAYklxQUBsQA==

Attributes:
   end_address richtige Adresse
   outputReadings text
   room       Information
   start_address richtige Adresse
   userattr   end_address outputReadings start_address verbose
   verbose    1

eki

#17
Hmm...

Sieht auch OK aus. Dann musst Du mir wohl auch noch dein HTML posten (inklusive Header etc.). Alternativ mal Debug im index.html aktivieren

<meta name="debug" content="1"> <!-- 1=output to console;0=not output -->

und dann das Resultat aus der Browser Konsole posten.

TWART016

Zitat von: eki am 13 November 2017, 15:47:17
Soweit ich das beurteilen kann, müsste Deine Definition passen. Bekommst Du irgendwelche Meldungen auf der Browser Konsole?
Das steht in der Console.

Base dir: ./
fhem-tablet-ui.js:2182 jQuery dynamically loaded
widget_gmaps.js:16 null
js?key=xxx:40 InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number
_.Ub @ js?key=xxx:40
_.Xb @ js?key=xxx:41
(anonymous) @ js?key=xxx:53
_.m.setValues @ js?key=xxx:120
zg @ js?key=xxx:87
init_ui @ widget_gmaps.js:523
(anonymous) @ widget_gmaps.js:233
each @ jquery.min.js:2
each @ jquery.min.js:2
init @ widget_gmaps.js:229
(anonymous) @ fhem-tablet-ui.js:1382
i @ jquery.min.js:2
add @ jquery.min.js:2
always @ jquery.min.js:2
(anonymous) @ fhem-tablet-ui.js:1371
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
f.(anonymous function) @ jquery.min.js:2
script.onload @ fhem-tablet-ui.js:1423
fhem-tablet-ui.js:733 initPage: 188.847900390625ms
4js?key=xxx:40 InvalidValueError: unknown property includeReturn
_.Ub @ js?key=xxx:40
_.Xb @ js?key=xxx:41
$h @ directions.js:126
(anonymous) @ js?key=xxx:131
(anonymous) @ js?key=xxx:122
(anonymous) @ js?key=xxx:61
(anonymous) @ js?key=xxx:122
(anonymous) @ js?key=xxx:61
(anonymous) @ js?key=xxx:122
fe @ js?key=xxx:63
ee.na @ js?key=xxx:122
(anonymous) @ util.js:1
fhem-tablet-ui.js:840 get jsonlist2: 24.437744140625ms
fhem-tablet-ui.js:925 read jsonlist2: 16.714111328125ms


Zitat von: eki am 13 November 2017, 15:47:17
Standardmäßig wird mit Mausrad gescrollt. Über das API kann man das ändern, ist bisher aber nicht herausgeführt. Scrollt die Karte denn bei Dir oder nicht?
Die Ursache ist der Browser. Wenn ich auf der Browserseite scrollen kann, funktioniert das in der Map nicht. Sobald der Browser nicht scrollen kann, wird in die Karte gezoomt.

masterpete23

HI,

ich bekomme nun den gleichen Fehler - meine Api war wohl nicht aktiviert - oder nutze ich die falsche?:

VM178 fhem-tablet-ui.js:2183 Base dir: ./
VM178 fhem-tablet-ui.js:2183 Base dir: ./
fhem-tablet-ui.js:743 initPage: 304.150146484375ms
fhem-tablet-ui.js:743 initPage: 0ms
widget_pagebutton.js:30 fetch content: 33.677001953125ms
widget_pagebutton.js:30 fetch content: 0ms
VM219 widget_gmaps.js:16 null
js?key=MEINAPIKEYKENNTKEINER:40 InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number
_.Ub @ js?key=MEINAPIKEYKENNTKEINER:40
_.Xb @ js?key=MEINAPIKEYKENNTKEINER:41
(anonymous) @ js?key=MEINAPIKEYKENNTKEINER:53
_.m.setValues @ js?key=MEINAPIKEYKENNTKEINER:120
zg @ js?key=MEINAPIKEYKENNTKEINER:87
init_ui @ VM219 widget_gmaps.js:523
(anonymous) @ VM219 widget_gmaps.js:233
each @ jquery.min.js:2
each @ jquery.min.js:2
init @ VM219 widget_gmaps.js:229
(anonymous) @ fhem-tablet-ui.js:1392
j @ jquery.min.js:2
add @ jquery.min.js:2
always @ jquery.min.js:2
(anonymous) @ fhem-tablet-ui.js:1381
j @ jquery.min.js:2
fireWith @ jquery.min.js:2
e.(anonymous function) @ jquery.min.js:2
script.onload @ fhem-tablet-ui.js:1433
fhem-tablet-ui.js:743 initPage: 105.9462890625ms
fhem-tablet-ui.js:743 initPage: 0ms
fhem-tablet-ui.js:850 get jsonlist2: 62.989013671875ms
fhem-tablet-ui.js:935 read jsonlist2: 2.327880859375ms

TWART016

Bei mir ist es der richtige API Key. Die anderen devices werden alle korrekt angezeigt.

ih-sqeezer

Hallo eki,

ich habe mich heute mal mit deinem neuen widget gmap beschäftigt. Vielen Dank für die super Arbeit!
Ich bekomme es nach einfacher Einrichtung, wie du es beschrieben hast, nicht zum Laufen :-(
Die Fehlermeldung hängt im Anhang. Hatte dieses Problem schon mal jemand und konnte es lösen?
Im FF, Chrome und Fully bekomme ich immer den gleichen Fehler. FHEM habe ich auch schon neugestartet, ändert leider nichts.

Danke und beste Grüße,
Ingo

Wuehler

Hi,
habe eben bei der Einrichtung denselben Fehler gehabt. Du musst dir einen API-Key für die Maps JS API besorgen.

Hat jemand die Map schonmal in einem Popup dargestellt? Bei mir kommt dan nur eine graue Fläche :(

TWART016

Zitat von: Wuehler am 18 November 2017, 15:47:20
Hat jemand die Map schonmal in einem Popup dargestellt? Bei mir kommt dan nur eine graue Fläche :(
Ich habe gleiches Verhalten.

masterpete23

Zitat von: Wuehler am 18 November 2017, 15:47:20
Hi,
habe eben bei der Einrichtung denselben Fehler gehabt. Du musst dir einen API-Key für die Maps JS API besorgen.

Hat jemand die Map schonmal in einem Popup dargestellt? Bei mir kommt dan nur eine graue Fläche :(
Hatte ich. Geht auch nicht

Gesendet von meinem FRD-L09 mit Tapatalk


Wuehler

OK. Danke. Ist auch nicht wirklich wichtig. Habs mit einer neuen Seite gelöst.
Was ich beim ausprobieren vergessen habe: Vielen Dank an eki und einen Daumen hoch.

ih-sqeezer

Hallo zusammen,

vielen Dank für den schnellen support eurerseits. Jedoch bekomme ich das widget dennoch nicht zum Laufen.
Ich habe heute noch mal ein neues Projekt im Google API Manager angelegt und mir einen neuen API key erstellt. Es gibt ja hier keinen speziellen MAPS JS API key, sondern lediglich einen allgemeinen MAPS API key. Jedoch sind sämtliche Google MAPS API Schnittstellen aktiviert. Der Fehler besteht nach wie vor. Aber im Google API Manager Dashboard kann ich auch keine Anfragen von meinem RPI an die MAPS JS API Schnittstelle sehen (history).
Ich habe schon seit ca. 1 Jahr in FHEM mehrere TRAFFIC devices am Laufen, ohne jegliche Probleme. Dazu habe ich damals ebenfalls einen GMAPS API key erstellt. Auch dieser key funktioniert nicht mit dem widget_gmaps.js. Auch mit einem browser cache clear gibt es keine Änderung.
Weiterhin habe ich anstelle der "fhem-tablet-ui-user.css" eine eigene "fhem-tablet-ui-user_tablet.css" seit Anfang an am Laufen. Ziel ist es hier, dass diese nicht mal von fhem mit einem update überschrieben wird. Also habe ich die Erweiterungen von eki in dieser Datei mit eingepflegt.
Die Anbindung an die GMAPS API Schnittstelle:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>
habe ich auch an beiden Stellen von FTUI eingebunden. Also einmal direkt in der index-home.html und einmal in der Ziel-html Seite.

Ich habe ehrlich gesagt keinen Schimmer mehr, wo der Fehler liegen sollte :-(

Vielleicht hat noch jemand eine zündende Idee?

Danke und beste Grüße,
Ingo

Wuehler

Ruf mal die Entwicklertools in deinem browser auf. Da wirst du vermutlich in der console einen javascriptfehler finden. Mit meinem alten TRAFFIC-key gings bei mir auch nicht.

masterpete23

Zitat von: Wuehler am 18 November 2017, 23:32:59
Ruf mal die Entwicklertools in deinem browser auf. Da wirst du vermutlich in der console einen javascriptfehler finden. Mit meinem alten TRAFFIC-key gings bei mir auch nicht.
Ja bei mir kam mit dem neuen key auch eine neue Fehlermeldung. Siehe oben.

Gesendet von meinem FRD-L09 mit Tapatalk


ih-sqeezer

Hallo,

also im Chrome bekomme ich dazu in der Konsole folgende Details zum Fehler: