[Closed] Neues FTUI Widget Kartendarstellung mit Google Maps API

[Wuehler]

die Zeile mit var URL = ... ist irrelevant. Die URL wird später nicht verwendet.
Lass mal das Attribut data-mapgroup weg (oder schreibe es dazu). Mal sehen was dann passiert.

Edit: Hast du mal einen anderen Browser versucht?

[eki]

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

Nein, ich bin nicht im Urlaub, aber ich habe da noch einen "Nebenjob" der auch irgendwie seine Zeiten fordert  .

Vielen Dank an Wuheler und masterpete23 fürs Debuggen . Ich habe die Korrekturen in die Datei im ersten Eintrag dieses Threads entsprechend angepasst (also am besten noch mal diese Datei herunterladen und damit die Alte im js Verzeichnis ersetzen).

Das Problem von ih-sqeezer habe ich mir auch mal angeschaut. Ich habe die Definition in test_gmaps.html ausprobiert. Was da noch fehlt, ist eine Höhe für das div mit der Karte. Im Moment wird die Höhe nicht angegeben und ist deshalb, zumindest bei mir, 0 und damit ist auch nichts zu sehen. Wenn man die Kofiguration folgendermaßen:

Code Auswählen Erweitern


<div style="height: 100%;" data-type="gmaps"
data-showdetails="true"
data-device="rr_Ingo"
data-longitude="locationLong"
data-label="fa-home"
data-icon="no-icon"
data-latitude="locationLat"
data-mapgroup="1"
data-stroke="#dd0033,7,70">
</div>
anpasst, dann wird, zumindest bei mir, eine Karte angezeigt (natürlich habe ich meinen API key eingetragen und ein dummy angelegt, der rr_Ingo heißt und zumindest die Attribute "locationLog" und "locationLat" besitzt und dort auch sinnvolle Werte eingetragen).
Die Fehlermeldung, die ih-sqeezer gepostet hat, deutet darauf hin, dass das Laden des Google Scripts nicht klappt, allerdings bekomme ich, wenn ich einen falschen Key eintrage, eine Fehlermeldung vom Google API, die besagt dass der Key falsch ist. Außerdem erscheint statt des Kartenfensters ein graues Fenster mit:
"Hoppla! Ein Fehler ist aufgetreten. Google Maps wurde auf dieser Seite nicht richtig geladen. Technische Details dazu entnimmst du der JavaScript-Konsole.".
Wenn Du im Browser Dir mal den Datenverkehr anschaust (Rechte Maustaste, Inspect und dann den Network Reiter öffnen), dann sollten dort einige GET Aufrufe zu finden sein, die als Antwort irgenwelchen js Code enthalten.

[ih-sqeezer]

Guten Abend zusammen,

@ eki:
Das war nur Spaß. Sicherlich geht jeder seiner Hauptarbeit nach, bevor man sich um solche freizeittechnischen Dinge kümmert. Geht mir doch genauso.

Zum Problem, ich habe heut noch mal alles mögliche ausprobiert. Also neues widget geladen, html angepasst, API-KEY in google geprüft, browser cache gelöscht.
Es hilft leider alles nix. Ich habe es in FF, Chrome und Fully geprüft. Dann habe ich erneut den "alten" API-KEY von meinem laufenden TRAFFIC device benutzt. Es bleibt immer beim gleichen Fehler: widget_gmaps.js: 523 | ReferenceError: google is not defined.
Dann habe ich weiter im debugger geforscht. In der Netzwerkanalyse erscheint das widget_gmap.js mit status grün:200, wie alle anderen Dateien.
Jedoch scheint mir es so, als ob die API Schnittstelle nicht korrekt läuft bzw ich keinen Zugang zu GMAPS bekomme.

Gruß,
Ingo

[ih-sqeezer]

Ich habe jetzt noch mal den API-key direkt ins widget hart eingetragen. Selbst damit kommen keine traffics im google Dashboard an.

[eki]

Hallo Ingo,

in der Liste mit den Netzwerkaktivitäten sollt auch ein GET mit "js?key=..." zu sehen sein. Siehst Du diesen Eintrag und wenn ja, wie ist das Ergebnis?

[ih-sqeezer]

Hallo eki,

nein, das kommt bei mir nicht. Siehe Anhang.

[eki]

Das scheint irgendetwas mit dem Timing der asynchronen GET Aufrufe zu tun zu haben (wenn das widget_gmaps.js schneller da ist und abgearbeitet wird, als das map API, dann fällt das Widget auf die Nase, weil die Google Funktionen noch gar nicht geladen und verfügbar sind).

Ich habe jetzt mal eine neue Version gebastelt, die das Google Maps API dynamisch vom Script aus lädt und bei der ich versuche das Problem mit entsprechenden Prüfungen und Timeouts zu umgehen. Ist angehängt, bitte probier das mal aus. Allerdings musst Du jetzt nur noch deinen API Key als meta im HTML hinterlegen, die Zeile mit dem <script src="https://maps.googleapis... musst Du löschen. Ich habe mal Deine Minimal HTML mit den entsprechenden Änderungen auch noch angehängt (bitte noch "myAPIKey" durch Deinen API Key ersetzen).

Bin mal gespannt, ob es jetzt bei Dir klappt. Falls ja, werde ich das oben entsprechend ändern.

[masterpete23]

Hi,

die läuft nun bei mir

[ih-sqeezer]

Hallo eki,

danke zunächst für deinen support!
Ich bin leider heute nicht eher zum Ausprobieren gekommen. Nun zum (Teil-)Erfolg ...
Mit den Änderungen sehe ich jetzt zunächst für einige ms eine google map. Jedoch switched die Karte sofort in einen Fehler.
Es erscheint eine Toast-Message: "Could not find API key, pleas add to your html".
Hm, ich habe jedoch meinen API Key in das html file reingeschrieben bzw. geändert.
Zur Überprüfung habe ich in der Netzwerkanalyse erstmal den cache deaktiviert. Jedoch werden alle files und Befehle ohne Fehler ausgeführt.
Jetzt sehe ich zwar in der Netzwerkanalyse das GET zu google maps mit jedoch keinem APIKey angehängt. Steht der key niemals im Klartext mit drin? Setht nur die variable "APIKey" drin.

Das ist ja schon mal der richtige Weg würde ich sagen.

Wie kann ich dir bei der Fehlersuche weiter behilflich sein?

BTW: In der html Datei stand noch dein API key in Klartext drin. Und bei der Toast-Message solltest du noch das "e" bei "please" mit einbauen

[eki]

Hast du denn in dem meta tag Deinen API Key eingetragen? Was passiert denn wenn Du einfach mal mein File aufrufst?

[ih-sqeezer]

Ja habe ich. Es passiert leider nix anderes mit deinem file.
Bezüglich cache bin ich im debug mode mit deaktiviertem cache.

Update:
Chrome wirft noch etwas mehr Info an den Tag, siehe Anhang.
Scheint so, als ob der key üngültig sei. Ich habe deinen key mit deinem file und auch mein html file mit meinem key ausprobiert. Kommt immer auf das gleiche Ergebnis.

[eki]

Unter https://developers.google.com/maps/documentation/javascript/error-messages?hl=de sind diese beiden Fehler beschrieben. Deutet auf einen ungültigen oder abgelaufenen Schlüssel hin.

Eigenartig finde ich, dass das auch mit dem Schlüssel auftritt, der bei mir funktioniert?! Habe aber aktuell auch keine Idee was da bei Dir faul ist, werde aber weiter nachdenken.

[ih-sqeezer]

Der key kann ja aber nicht abgelaufen sein, da ich damit mein TRAFFIC device betreibe. Und das läuft problemlos.

[eki]

Das heißt noch gar nichts. Das TRAFFIC Modul in FHEM verwendet das Google Maps Directions API. Während das widget_gmaps.js die JS API verwendet. Möglicherweise hat Dein Schlüsse da ja Einschränkungen

Kannst Du bitte mal hier
https://console.developers.google.com/apis/credentials
nachschauen. Dort sollte Dein Schlüssel aufgelistet sein. Wenn Du auf den Namen klickst, siehst Du die Eigenschaften. Dort kann man auch setzen, für welche Anwendungen (Apps, HTTP, ...) und für welche APIs (Directions, DistanceMatrix, Javascript) der Schlüssel gelten soll. Bitte check das mal ab.

[ih-sqeezer]

Hallo eki,

hatte ich schon mal für mich gecheckt. Habe es heute noch mal gecheckt (siehe Anhang).
Demnach sollte der API-key uneingeschränkt sein. Ich meine, ich hatte ja auch den key in der html von dir genutzt und kam zum gleichen Fehler.
Weiterhin habe ich es mal vom Smartphone via LTE/HSDPA aufgerufen => gleicher Fehler.