[Closed] Neues FTUI Widget Kartendarstellung mit Google Maps API

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

Vorheriges Thema - Nächstes Thema

ih-sqeezer

Also ich habe den neu angelegten API key jetzt mal im TRAFFIC Modul ausprobiert. Er funktioniert in FHEM und ich sehe auch im google Dashboard die Anfragen von FHEM.
Daran sollte es also nicht liegen. Ich bin derzeit ratlos, was ich eventuell falsch gemacht bzw vergessen habe einzustellen oder zu aktivieren.

Ich bin für jede Hilfe dankbar!

Grüße und einen schönen Sonntag noch euch allen.

Ingo

Wuehler

Hi Ingo,

Genau dieselbe Meldung hatte ich auch. Die kommt, wenn die ,,Anmeldung" bei google nicht geklappt hat.
Reduziere die Ziel-Html-Seite mal auf das Wesentliche. Und wenn es dann immer noch nicht geht lade sie hier mal hoch.

ih-sqeezer

Ich habe soeben erneut eine test page erstellt, mit den wirklich minimalen Inhalten.
Dazu den Auszug aus der Chrome Konsole.
Ergebnis ist immer noch keine Anzeige von GMAPS und gleiche Fehlermeldung.

Vielleicht sieht jemand mehr als ich.

Danke euch.

Wuehler

Hi,

in der Zeile hast du deine API-Key eingesetzt?
   <script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>

Dann setzt bitte in folgender Zeile einen Headertext ein. Scheint komisches Verhalten zu geben wenn der fehlt:
<header class="headerTransparent"></header>
zB:
<header class="headerTransparent">Maps</header>

ih-sqeezer

Ja natürlich, den API key habe ich nur aus dem code gelöscht, bevor ich es hier gepostet habe.

Den header hatte ich auch in einem anderen html file schon drinstehen. Daran sollte es nicht liegen.
Ich werde es heute jedoch noch mal bei diesem test file erneut prüfen und dir bescheid geben.

Grüße,
Ingo

masterpete23

#35
habe mal bei google geschaut nach
InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number
scheint für Programmierer wohl einfach zu lösen sein - bin nur kein Programmierer :)
https://www.google.de/search?ei=Sv0SWvDuBZHasAfPkIWwAw&q=InvalidValueError%3A+setCenter%3A+not+a+LatLng+or+LatLngLiteral%3A+in+property+lat%3A+not+a+number&oq=InvalidValueError%3A+setCenter%3A+not+a+LatLng+or+LatLngLiteral%3A+in+property+lat%3A+not+a+number&gs_l=psy-ab.3..0i10k1j0i10i30k1j0i5i30k1.152114.171631.0.171908.5.5.0.0.0.0.116.116.0j1.1.0....0...1.1.64.psy-ab..4.1.115....0.cqaBjdow54E


EDIT: Kein Programmierer aber ein "Hacker" :)
Also im widget_gmaps.js

alt:if (!elem.data('map_options').center) elem.data('map_options').center = (elem.data('center')&& elem.data('center')!='auto')? {lat: parseFloat(elem.data('center')[0]),lng: parseFloat(elem.data('center')[1])} : {lat: UNDEFINED, lng: UNDEFINED};
neu:if (!elem.data('map_options').center) elem.data('map_options').center = (elem.data('center')&& elem.data('center')!='auto')? {lat: parseFloat(elem.data('center')[0]),lng: parseFloat(elem.data('center')[1])} : {lat: 0, lng: 0};

Dann erhalte ich ein Bild

Wuehler

Dafür gibt es dss Attribut data-center. Sieher erster Beitrsg des Threads. Muss man nicht setzen wenn data-device vom Typ TRAFFIC ist.

masterpete23

Zitat von: Wuehler am 20 November 2017, 17:19:49
Dafür gibt es dss Attribut data-center. Sieher erster Beitrsg des Threads. Muss man nicht setzen wenn data-device vom Typ TRAFFIC ist.

OK, was für Readings hast du in deinem TRAFFIC device? Da stimmt ja dann irgendwas nicht bei mir oder?

ih-sqeezer

Also ich habe alle drei Varianten aus dem Beispiel ausprobiert ... ein TRAFFIC device, ein ROOMMATE device und einfach das home symbol.
Ich habe dazu jeweils schon vorhandene und funktionsfähige devices genommen.
Leider erscheint bei allen drei Varianten der gleiche Fehler, ohne Anzeige einer GMAP.

Im Anhang habe ich mal das TRAFFIC device beigefügt. Und im ROOMMATE device stehen auch korrekte Werte bei 'locationLat' und 'locationLong' drin.

Bezüglich des Header Namens im html habe ich auch mit eingefügten Namen keine Änderung, gleicher Fehler.

PS: Ich frag mich allerdings langsam, warum sich eki nicht an der Diskussion beteiligt :-( vlt ist er ja im Urlaub.

Grüße,
Ingo

Wuehler

@masterpete: Ein Reading zu Center habe ich auch nicht beim TRAFFIC-Device. Das macht Google automatisch wenn man eine route angibt. Braucht man dann also nicht beim Aufruf der API zu setzen.

Da wir beta-Tester sind, sind wohl noch Fehler im Widget ;-)
Ich habe eine gefixte Version der .js angehängt.

@eki: in folgender Zeile fehlte zweimal das split(",")
if (!elem.data('map_options').center) elem.data('map_options').center = (elem.data('center')&& elem.data('center')!='auto')? {lat: parseFloat(elem.data('center').split(",")[0]),lng: parseFloat(elem.data('center').split(",")[1])} : {lat: undefined, lng: undefined};


wenn man damit folgendes Widget definiert sollte es funktionieren (bisher ging nur TRAFFIC, aber auch nur, wenn data-center gefehlt hat). Bei mir durfte die style="height... ebenfalls nicht fehlen, ansonsten gab es eine graue Fläche. Die Center-Werte müsst ihr natürlich anpassen:
<div style="height:90%; width:90%"
         data-type="gmaps"
         data-device="global"
data-label="fa-home"
         data-zoom="11"
         data-center="52.001,9.118">
</div>



ih-sqeezer

Hm, ich habe alle files wie beschrieben aktualisiert und es funktioniert immer noch nicht bei meinem System.
Ich glaub ich habe wirklich noch ein generelles Problem mit der API Anbindung zu GMAPS.
Jedoch weiß ich noch nicht so richtig, wie ich das analysiert bekomme.
Generell funktioniert die API Schnittstelle, das sehe ich beim TRAFFIC device. Im Google API Manager sehe ich auch über diesen key den traffic vom fhem TRAFFIC device.
Demnach muss die API Schnittstelle okay sein. Oder gibt es einen speziellen API JS key?
Bleibt dann nur noch das widget selbst bei meiner Überlegung.

Ich bin sehr gerne bereit einiges zu testen. Nur mir gehen langsam die Ideen aus.

Grüße,
Ingo

Wuehler

Etwas mehr Infos wären gut.
Hast du den Browsercache nach dem Austausch der js gelöscht?
Wie genau lautet denn deine Fehlermeldung in der console der Entwicklungstools des Browsers?
Wie sieht deine ftui aus?

ih-sqeezer

Jep, browser cache lösche ich generell nach Änderungen.
Ich habe wie schon in meinen bisherigen posts nur die test_gmaps.html zu gange.
Die Fehlermeldung in der Konsole hat sich nicht geändert, siehe Anhang.

RPI3, FHEM v5.8, FTUI v2.6.31

Grüße,
Ingo

Wuehler

Jetzt bin ich auch etwas ratlos. Nimm mal die angehängte JS. Da sollte drei mal eine Warnmeldung aufpoppen. Was steht da dann drin? Oder alternativ: Kannst du debuggen? Mal in die Entwicklertools gehen und schauen ob du vor Zeile 481 und 523 (alte Version, nicht die angehängte) einen Breakpoint setzen kannst.

ih-sqeezer

Hab mal kurz den debugger angeworfen ... so wie es aussieht wird mein API KEY nicht mit übertragen. Die Variable ist leer.

Definiert habe ich diesen in der html so:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>

als letztes im head.

Natürlich habe ich dazu den phrase "YOUR-API-KEY" mit meinem key ersetzt.

Kann sich das jemand erklären?

Danke und beste Grüße,
Ingo