Google Maps mit verkehrslage

[Bonze]

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

[psilo]

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..

<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>

[psilo]

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

[psilo]

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

[tger977]

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

[Sandman60]

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:

<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

[Bonze]

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

[Sandman60]

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

[psilo]

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..

[oli82]

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.

---

---

[psilo]

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:

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.

[oli82]

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

[psilo]

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

[oli82]

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.

[psilo]

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?