Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [nicht gelöst] Google Maps Traffic ! in html-Widget

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    24
    1
    1.3k

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    9.3k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    14
    1
    2.6k

[nicht gelöst] Google Maps Traffic ! in html-Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
39 Beiträge 13 Kommentatoren 10.7k Aufrufe
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • bahnuhrB Online
    bahnuhrB Online
    bahnuhr
    Forum Testing Most Active
    schrieb am zuletzt editiert von Segway
    #1

    Hallo,

    man nehme ein html-Widget und gebe bei html folgendes ein:

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Traffic layer</title>
        <style>
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
          #map {
            height: 100%;
          }
        </style>
      </head>
      <body>
        <div id="map"></div>
        <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        //zoom: {javascript.0.Status.Maps.Zoom},
        center: {lat: 50.465814, lng: 9.710697}
        //center: {lat: {javascript.0.Status.Maps.Breitengrad1}, lng: {javascript.0.Status.Maps.Längengrad1}}
      });
    
      var trafficLayer = new google.maps.TrafficLayer();
      trafficLayer.setMap(map);
    }
    
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=nehme dein key&callback=initMap&signed_in=true" async defer>
        </script>
      </body>
    </html>
    

    Unten bei key muss der persönliche key eingegeben werden.

    Dann bekommt man eine google maps karte mit den aktuellen Verkehrslinien (grün, gelb, rot).

    Nun zum Problem:

    Ich habe nun versucht bei o.g. Eingaben die Zahlen "maps, lat, lng" durch bindings zu ersetzen (sieht man oben bei //).

    Dies klappt aber nicht !

    warum funktioniert: zoom: 8,

    aber nicht: zoom: {javascript.0.Status.Maps.Zoom},

    Hat da jemand mal ne Idee für mich.

    mfg

    Dieter


    Wenn ich helfen konnte, dann Daumen hoch (Pfeil nach oben)!
    Danke.
    gute Forenbeiträge: https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge
    ScreenToGif :https://www.screentogif.com/downloads.html

    1 Antwort Letzte Antwort
    0
    • bahnuhrB Online
      bahnuhrB Online
      bahnuhr
      Forum Testing Most Active
      schrieb am zuletzt editiert von
      #2

      noch ne Ergänzung:

      im Edit-Modus bekomme ich die Karte angezeigt.

      im index-Modus aber nicht.

      weiterhin hab ich im Script einen Fehler/Hinweis im edit-Modus bei html:

      In der Zeile: src="https…...

      kommt ein rotes x

      wenn man drauf geht kommt: "named entity expected. got none"

      Im Internet steht nun man soll "&" ersetzen durch "&"

      Funktioniert auch; das rote x ist dann weg.

      Aber die Karte im index modus ist immer noch weg (es wird nur ein grauer Kasten angezeigt).

      Helft mir mal.

      mfg

      Dieter


      Wenn ich helfen konnte, dann Daumen hoch (Pfeil nach oben)!
      Danke.
      gute Forenbeiträge: https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge
      ScreenToGif :https://www.screentogif.com/downloads.html

      1 Antwort Letzte Antwort
      0
      • BluefoxB Offline
        BluefoxB Offline
        Bluefox
        schrieb am zuletzt editiert von Segway
        #3

        @bahnuhr:

        Hallo,

        man nehme ein html-Widget und gebe bei html folgendes ein:

        ! ````
        !

        <title>Traffic layer</title>
        

        ! ````

        Unten bei key muss der persönliche key eingegeben werden.

        Dann bekommt man eine google maps karte mit den aktuellen Verkehrslinien (grün, gelb, rot).

        Nun zum Problem:

        Ich habe nun versucht bei o.g. Eingaben die Zahlen "maps, lat, lng" durch bindings zu ersetzen (sieht man oben bei //).

        Dies klappt aber nicht !

        warum funktioniert: zoom: 8,

        aber nicht: zoom: {javascript.0.Status.Maps.Zoom},

        Hat da jemand mal ne Idee für mich.

        mfg

        Dieter `
        Erstens, verstehe ich nicht, warum du eigenes Widget da baust.

        https://github.com/ioBroker/ioBroker.vis-map

        Zweitens, so einen Code funktioniert bei mir wunderbar:

        <style>
          #map {
            height: 100%;
          }
        </style>
        <div id="map"></div>
        <script>
        function initMap() {
          var map = new google.maps.Map(document.getElementById('map'), {
            zoom: {dev1},
            //zoom: {javascript.0.Status.Maps.Zoom},
            center: {
                lat: 50.465814, 
                lng: 9.710697
            }
            //center: {lat: {javascript.0.Status.Maps.Breitengrad1}, lng: {javascript.0.Status.Maps.Längengrad1}}
          });
        
          var trafficLayer = new google.maps.TrafficLayer();
          trafficLayer.setMap(map);
        }
        
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=initMap&signed_in=true" async defer>
        </script>
        
        
        1 Antwort Letzte Antwort
        0
        • BluefoxB Offline
          BluefoxB Offline
          Bluefox
          schrieb am zuletzt editiert von
          #4

          Jetzt verstehe ich. Du willst Traffic sehen. ;)

          1 Antwort Letzte Antwort
          0
          • bahnuhrB Online
            bahnuhrB Online
            bahnuhr
            Forum Testing Most Active
            schrieb am zuletzt editiert von
            #5

            @Bluefox:

            Jetzt verstehe ich. Du willst Traffic sehen. ;) `

            genau, ich wollte traffic

            P.S.

            Wenn es deine Zeit erlaubt würde ich gerne wissen warum dein Code läuft; aber meiner nicht.

            Vielleicht ist es ja in wenigen Worte erklärbar.

            Danke; dein Code läuft.

            mfg

            Dieter


            Wenn ich helfen konnte, dann Daumen hoch (Pfeil nach oben)!
            Danke.
            gute Forenbeiträge: https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge
            ScreenToGif :https://www.screentogif.com/downloads.html

            1 Antwort Letzte Antwort
            0
            • BluefoxB Offline
              BluefoxB Offline
              Bluefox
              schrieb am zuletzt editiert von Segway
              #6

              @bahnuhr:

              @Bluefox:

              Jetzt verstehe ich. Du willst Traffic sehen. ;) `

              genau, ich wollte traffic

              P.S.

              Wenn es deine Zeit erlaubt würde ich gerne wissen warum dein Code läuft; aber meiner nicht.

              Vielleicht ist es ja in wenigen Worte erklärbar.

              Danke; dein Code läuft.

              mfg

              Dieter `

              1. Du versuchst eine ganze Seite zu platzieren mit … auch mit Styling für body, html.

              Das darf man nicht machen. Weil auf der Seite gibt es schon und die dürfen nur einmal sein.

              2. dein Code

                  center: {lat: 50.465814, lng: 9.710697}
                  //center: {lat: {javascript.0.Status.Maps.Breitengrad1}, lng: {javascript.0.Status.Maps.Längengrad1}}
              

              Wird geparst, d.h. vis versicht eine Variable "lat: 50.465814, lng: 9.710697" und eine "lat: {javascript.0.Status.Maps.Breitengrad1}, lng: {javascript.0.Status.Maps.Längengrad1} zu finden.

              Die findet vis natürlich nicht, und dann wird aus deinem code:

              center: undefined
              //center: undefined
              

              Wenn du Binding ausschalten willst, dann musst du einfach { und } auf unterschiedlichen Zeilen haben. Z.B.

              center: {
              	lat: 50.465814, 
              	lng: 9.710697
              	}
              
              
              1 Antwort Letzte Antwort
              0
              • bahnuhrB Online
                bahnuhrB Online
                bahnuhr
                Forum Testing Most Active
                schrieb am zuletzt editiert von
                #7

                Danke für die kurze Info.

                Aber ich glaube das ist zu viel für mich.

                Muss mir deine Sätze mal ausdrucken und ganz langsam verstehen was damit gemeint ist.

                Trozdem danke für die Berichtigung meines codes (den ich ja auch aus dem Internet habe).

                mfg

                Dieter


                Wenn ich helfen konnte, dann Daumen hoch (Pfeil nach oben)!
                Danke.
                gute Forenbeiträge: https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge
                ScreenToGif :https://www.screentogif.com/downloads.html

                1 Antwort Letzte Antwort
                0
                • bahnuhrB Online
                  bahnuhrB Online
                  bahnuhr
                  Forum Testing Most Active
                  schrieb am zuletzt editiert von
                  #8
                  Erstens, verstehe ich nicht, warum du eigenes Widget da baust.
                  https://github.com/ioBroker/ioBroker.vis-map
                  
                  

                  @bluefox

                  Wäre es denn möglich, wenn man dieses "traffic" in das widget integrieren könnte.

                  Doppelt schön wäre es, wenn dieses Feld dann auch per bindings steuerbar wäre (also mit einer Variable die man in Objekt anlegt und per Script verändern könnte; mache ich derzeit so mit zoom, Längen- und Breitengrad).

                  mfg

                  Dieter


                  Wenn ich helfen konnte, dann Daumen hoch (Pfeil nach oben)!
                  Danke.
                  gute Forenbeiträge: https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge
                  ScreenToGif :https://www.screentogif.com/downloads.html

                  1 Antwort Letzte Antwort
                  0
                  • bahnuhrB Online
                    bahnuhrB Online
                    bahnuhr
                    Forum Testing Most Active
                    schrieb am zuletzt editiert von
                    #9

                    @bluefox

                    Liest du noch mit ?


                    Wenn ich helfen konnte, dann Daumen hoch (Pfeil nach oben)!
                    Danke.
                    gute Forenbeiträge: https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge
                    ScreenToGif :https://www.screentogif.com/downloads.html

                    1 Antwort Letzte Antwort
                    0
                    • Jeeper.atJ Offline
                      Jeeper.atJ Offline
                      Jeeper.at
                      schrieb am zuletzt editiert von
                      #10

                      Lieber Dieter, Bluefox arbeitet viel in der Nacht.

                      Bitte gib ihm und vielen anderen im Forum doch ein wenig mehr Zeit um zu reagieren. So eine Antwort kann schon mal 1 Tag dauern.

                      Lg

                      Günther

                      1 Antwort Letzte Antwort
                      0
                      • bahnuhrB Online
                        bahnuhrB Online
                        bahnuhr
                        Forum Testing Most Active
                        schrieb am zuletzt editiert von
                        #11

                        bluefox hat auf die anderen Punkte äußerst schnell geantwortet.

                        Ich dachte er ist noch online.

                        Aber selbstverständlich lass ich ihm Zeit.

                        Wollte ihn nicht drängen; dachte halt er ist noch online.

                        mfg

                        Dieter


                        Wenn ich helfen konnte, dann Daumen hoch (Pfeil nach oben)!
                        Danke.
                        gute Forenbeiträge: https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge
                        ScreenToGif :https://www.screentogif.com/downloads.html

                        1 Antwort Letzte Antwort
                        0
                        • bahnuhrB Online
                          bahnuhrB Online
                          bahnuhr
                          Forum Testing Most Active
                          schrieb am zuletzt editiert von
                          #12

                          so: traffic widget läuft.

                          Jetzt will ich noch einen Marker einfügen:
                          filename="bild1.jpg" index="0">~~

                          Dieser Versuch klappt aber nicht. Das Bild wird angezeigt; der Marker aber nicht.

                          Anbei mal der komplette Code:

                          Hat jemand mal ne Idee oder sogar eine Lösung?


                          Wenn ich helfen konnte, dann Daumen hoch (Pfeil nach oben)!
                          Danke.
                          gute Forenbeiträge: https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge
                          ScreenToGif :https://www.screentogif.com/downloads.html

                          1 Antwort Letzte Antwort
                          0
                          • bahnuhrB Online
                            bahnuhrB Online
                            bahnuhr
                            Forum Testing Most Active
                            schrieb am zuletzt editiert von
                            #13

                            Also, ich bin ein Stück weiter:

                            In der einen View habe ich das Widget "Vis-map".

                            In einer anderen View habe ich ein "basic-html" mit folgendem code.

                            Solange bei html kein Code ! steht funktionieren beide views.

                            Sobald ich aber o.g. Code in dem html widget eintrage werden andere Variablen (die nichts mit den beiden widgets zu tun haben) nicht mehr aktualisiert.

                            Ich brauche nun wirklich mal einen Spezialisten

                            Vermutung von mir:

                            Kann es sein, dass ich durch die Zuweisung im Code () das andere widget so stark störe, dass nichts mehr geht ???

                            Oder an was könnte es liegen ?

                            mfg

                            Dieter


                            Wenn ich helfen konnte, dann Daumen hoch (Pfeil nach oben)!
                            Danke.
                            gute Forenbeiträge: https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge
                            ScreenToGif :https://www.screentogif.com/downloads.html

                            1 Antwort Letzte Antwort
                            0
                            • bahnuhrB Online
                              bahnuhrB Online
                              bahnuhr
                              Forum Testing Most Active
                              schrieb am zuletzt editiert von
                              #14

                              nach weiteren Tests.

                              Es liegt ganz klar an dem Code

                              Habe diesen jetzt auch mal als map2 umgeschrieben. Gab aber keine Veränderung.

                              Sobald der code im widget eingetragen ist werden andere widgets nicht aktualisiert.

                              Woran dies nun liegt weiß ich nicht; so gut sind meine java oder html Kenntnisse nicht.

                              Da aber auch absolut keine Reaktion von anderen kommt, gehe ich mal davon aus, dass nur ich dieses Problem habe.

                              Deshalb stampfe ich mein Projekt "traffic Ansicht" jetzt ein.

                              Kennzeichne den Thread als "nicht gelöst".

                              mfg

                              Dieter


                              Wenn ich helfen konnte, dann Daumen hoch (Pfeil nach oben)!
                              Danke.
                              gute Forenbeiträge: https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge
                              ScreenToGif :https://www.screentogif.com/downloads.html

                              1 Antwort Letzte Antwort
                              0
                              • S Offline
                                S Offline
                                Snake1024
                                schrieb am zuletzt editiert von
                                #15

                                Hallo,

                                ich bin Grundsätzlich zur Zeit auch an so einer Implementierung dran und scheitere zur Zeit auch an dem zweiten Widget. Ich möchte gerne zwei Kartenausschnitte auf meinem vis dargestellt bekommen. Bei mir ist es so, dass die reine Karte angezeigt bei beiden angezeigt wird, jedoch nur auf einem der beiden HTML Basic Widgets der "Traffic Layer" angezeigt wird.

                                Ich vermute mal, dass wir evtl. in dieser Funktion ein "unique" Problem haben, leider reichen hierfür nur meine Kenntnisse nicht aus.

                                var trafficLayer = new google.maps.TrafficLayer();
                                

                                Hat hier wer mittlerweile eine Lösung evtl.? Oder ist der vis Adapter für "Maps" bald auch damit ausgestattet?

                                1 Antwort Letzte Antwort
                                0
                                • BluefoxB Offline
                                  BluefoxB Offline
                                  Bluefox
                                  schrieb am zuletzt editiert von
                                  #16

                                  vis-map 0.1.4
                                  48_2017-04-28_07_53_21-edit_vis.png

                                  1 Antwort Letzte Antwort
                                  0
                                  • S Offline
                                    S Offline
                                    Snake1024
                                    schrieb am zuletzt editiert von
                                    #17

                                    :o :D MEGA…

                                    wann kann man damit rechnen?

                                    1 Antwort Letzte Antwort
                                    0
                                    • BluefoxB Offline
                                      BluefoxB Offline
                                      Bluefox
                                      schrieb am zuletzt editiert von Segway
                                      #18

                                      @Snake1024:

                                      :o :D MEGA…

                                      wann kann man damit rechnen? `

                                      Ist schon in latest repository

                                      1 Antwort Letzte Antwort
                                      0
                                      • C Offline
                                        C Offline
                                        Conquest
                                        schrieb am zuletzt editiert von
                                        #19

                                        Hallo, wo bekomme ich den Google API Schlüssel?

                                        Gruß Torsten

                                        Gesendet von meinem MHA-L29 mit Tapatalk

                                        1 Antwort Letzte Antwort
                                        0
                                        • BluefoxB Offline
                                          BluefoxB Offline
                                          Bluefox
                                          schrieb am zuletzt editiert von Segway
                                          #20

                                          @spoerl.torsten:

                                          Hallo, wo bekomme ich den Google API Schlüssel?

                                          Gruß Torsten

                                          Gesendet von meinem MHA-L29 mit Tapatalk `

                                          https://github.com/ioBroker/ioBroker.vis-map

                                          Da gibt es links. Geht noch?

                                          1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          729

                                          Online

                                          32.5k

                                          Benutzer

                                          81.7k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe