Ankündigung

Einklappen
Keine Ankündigung bisher.

Google Maps mit verkehrslage

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Google Maps mit verkehrslage

    Jemand ne idee ob man das auch bei uns als widget erstellen kann ? https://knx-user-forum.de/forum/proj...binden-in-visu Ich habs probiert, da es nur js, wusst ich nicht wie man das aufsplitten soll in js und html

    #2
    einfach den code im body irgendwo ins html kopieren.. ein iframe würde es aber auch tun

    den style würde ich anpassen, so wie im body ist das ja bildschirmfüllend..

    Code:
    <div id="map" style="width: 100%; height: 400px;"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=<apikey>&callback=initMap&signed_in=true" async defer>
    </script>
    <script>        
                function initMap() {
                  var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 11,
                    center: {lat: 48.7421789, lng: 9.102298}
                  });
    
                  var trafficLayer = new google.maps.TrafficLayer();
                  trafficLayer.setMap(map);
                }
    </script>
    Zuletzt geändert von psilo; 27.12.2016, 21:23.

    Kommentar


      #3
      Unabh. davon dass das ja jetzt nicht so das Problem war, danke für die gute Idee habs auch gleich mal integriert.

      Kommentar


        #4
        Noch eine kleine Referenz zum customizen: https://developers.google.com/maps/d...=de#MapOptions

        Kommentar


          #5
          Zitat von psilo Beitrag anzeigen
          Unabh. davon dass das ja jetzt nicht so das Problem war, danke für die gute Idee habs auch gleich mal integriert.
          bitteschön!

          so komm ich auch mal zu nem Beitrag im smartvisu Forum und freue mich auch euch geholfen zu haben
          Gruß
          Andi

          Kommentar


            #6
            Hab's nun noch ein bischen angepasst und ein paar Optionen ausgeblendet (Sign-In, Streetview, Sat) und einen Marker für HOME zur Orientierung gesetzt.
            Schade finde ich das es anscheinend den Toggle-Button für den Traffic (incl. Legende) nicht im Standard gibt, oder ich war zu blöd es zu finden, anyway, gefällt mir!
            Hier der angepasste Code:
            Code:
            <div class="block">
                <div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
                    <div data-role="collapsible" data-collapsed="false">
                        <div id="map" style="width: 100%; height: 400px;"></div>
                        <h3>Verkehrslage</h3>
                        <script src="https://maps.googleapis.com/maps/api/js?key=<APIKEY>&callback=initMap&signed_in=false" async defer>
                        </script>
                        <script>        
                            function initMap() {
                            var map = new google.maps.Map(document.getElementById('map'), {
                                zoom: 10,
                                center: {lat: 48.xxxx, lng: 11.xxxx},
                                disableDefaultUI: false,
                                clickableIcons: false,
                                mapTypeControl: false,
                                streetViewControl: false
                            });
            
                            var trafficLayer = new google.maps.TrafficLayer();
                            trafficLayer.setMap(map);
            
                            var marker = new google.maps.Marker({
                                position: {lat: 48.xxxx, lng: 11.xxxx},
                                map: map,
                                title: 'HOME'
              });
                            }
                        </script>
                    </div>
                </div>
            </div>
            Cheers,
            Oliver

            Kommentar


              #7
              Als out-of-the-box widget kann man das nicht umbauen oder ? Dann koennte man das in sh integrieren

              Kommentar


                #8
                Was meinst Du? Warum nicht so einfach D&D in die Visu?

                Kommentar


                  #9
                  Bonze Ich verstehe den Sinn auch nicht. Man könnte zwar bspw. die GPS Koords per Widgetparameter übergebbar machen, aber dann kann ich das doch gleich in das JS packen..

                  Kommentar


                    #10
                    Guten Morgen.
                    Kannst du das übergeben der GPS Koordinaten etwas genauer ausführen psilo ? Ich suche nämlich gerade eine Möglichkeit, die aktuelle Position von mir und meiner Frau in SV zu ermöglichen. Koordinaten habe ich schon verfügbar, sowie einen Link zum klicken, der die Position dann in GoogleMaps einblendet. Eine Karte direkt mit Pin in SV wäre aber die Lösung schlechthin
                    Stelle mir das in etwa so vor, wie es im Fibaro Home Center 2 gelöst ist, jedoch ohne zurückgelegten Weg: http://www.fibaro.com/de/das-system-.../home-center-2 > Geolokalisierung.

                    Kommentar


                      #11
                      oli82 ich setze die koordinaten hart auf meine autobahnzone, die ich jeden tag pendle.. du kannst aber sicher per api und javascript auch die koords deines handys auslesen und als center bei jedem laden der seite setzen.

                      https://developers.google.com/maps/d...ript/reference -> setCenter

                      da gibts auch ein Tutorial wie man das bauen könnte: https://developers.google.com/maps/d...pt/geolocation
                      das wirst Du brauchen:
                      Code:
                      if (navigator.geolocation) {
                                navigator.geolocation.getCurrentPosition(function(position) {
                                  var pos = {
                                    lat: position.coords.latitude,
                                    lng: position.coords.longitude
                                  };
                      
                                  //[...]
                                  map.setCenter(pos);
                                }, function() {
                                  //handleLocationError(true, infoWindow, map.getCenter());
                                });
                              } else {
                                // Browser doesn't support Geolocation
                                //handleLocationError(false, infoWindow, map.getCenter());
                              }
                            }
                      Da ich es nicht brauche, mache ich mir jetzt aber nicht die Mühe, das runterzucoden

                      Um die Koordinaten per GAD aus der SV dynamisch zu setzen müsstest Du Dich vermutlich in das JS handling der Widgets einklinken und dort immer "setCenter" triggern. Das ist aber durchaus einiges an Aufwand auf die Schnelle überlegt.

                      Wie kriegt Deine Visu bzw das Framework dahinter die Koordinaten? App die diese von den Handies sendet? Vielleicht interessiert es mich dann ja auch, aber meine Torsteuerung auf Basis meiner GPS Koordinaten saugt mir ratzfatz das Smartphone leer, daher k.a. wie man das praktikabel hinbekommt.
                      Zuletzt geändert von psilo; 11.01.2017, 17:10.

                      Kommentar


                        #12
                        Ich lasse auf den Handys Geofency als App laufen. Dort kannst du Orte hinterlegen, die z.b. einen Webhook auslösen. Dieser triggert bei mir über einen JSON POST request die aktuelle Position beim betreten / verlassen
                        Zuletzt geändert von oli82; 11.01.2017, 17:34.

                        Kommentar


                          #13
                          oli82 wird das lokal vom handy getriggert? da wäre ich meist ja sowieso im vpn. ansonsten brauche ich wohl einen rückkanal?

                          Kommentar


                            #14
                            Ja, sobald das Handy in einer deiner angelegten Locations kommt oder eine verlässt, triggert das Handy den Webhook. Ich habe so die meisten Orte, die ich regelmäßig besuche, mit einem Webhook versehen und nutze davon einige z.B. zur Heizungs- Licht- oder Anlarmanlagensteuerung.

                            Kommentar


                              #15
                              Der "webhook" ist dann ein bspw. ein WebService der bei Dir auf dem Server läuft? Oder ein Dienst in der Cloud? wie stelle ich mir das vor?
                              Zuletzt geändert von psilo; 12.01.2017, 13:43. Grund: E

                              Kommentar

                              Lädt...
                              X