Google Maps mit verkehrslage

[Max2612]

Der Code aus post #2 funktioniert jetzt auf einer neu erstellten Seite.
Der aus deiner Anleitung leider nicht. Wieder der gleiche Fehler.

[psilo]

ich habe nochmal 1:1 den code bei mir reinkopiert.

bei mir geht es sogar nur mit den ersten beiden gps koordinaten und ohne vorhandenes bild.

ich hatte aber den fehler gemacht, nach dem apikey mit einem anführungszeichen das attribut wieder zu schliessen. dann blieb die seite mit lade "kreis" weiss. das als letzte idee. danach bin ich ratlos. vielleicht hat smai noch ne idee

[psilo]

noch ne sache: ich bin mit meinem key schon auf google cloud. vielleicht ist das der unterschied? bisher bin ich im kostenfreien rahmen geblieben. google hatte mir mal gemailt, dass der klassische weg jetzt sowieso nicht mehr gehen würde.

[Max2612]

Ich werde heute mal smartVISU neu “installieren“. Mal schauen, ob das was bringt.

Werde dann berichten...

[Max2612]

So, smartVISU neu installiert. Das Ergebnis ist das gleiche.
Öffnen der page mit widget geht nicht.
Öffnen der page ohne widget geht. Danach die Zeile mit widget einfügen und mit F5 aktualisieren geht. Karte mit richtigen Koordinaten wird angezeigt.
Nach verlassen der page und wieder aufrufen, fängt alles wieder von vorne an.

[psilo]

dann poste bitte nochmal details zur einbindung oder prüfe selber bitte jedes anführungszeichen und jede klammer irgendwas ist faul

[Max2612]

Werd ich machen. Bin aber schon am Frühschoppen

[Max2612]

So, da bin ich wieder.
Nach stundenlangem suchen und probieren, hier nochmals meine einzelnen Dateien.

Frisch installiertes smartVISU 2.9
Im Ordner /dropins/widgets:

gmaps.js

// dropins/widgets/gmaps.js
$.widget("sv.gmaps_map", $.sv.widget, {
    initSelector: 'div[data-widget="gmaps_map"]',

    options: {
        'traffic': null,
    },

    _create: function () {
        this._super();

        this.map = new google.maps.Map(document.getElementById(this.element[0].id), {
            zoom: 11,
            disableDefaultUI: false,
            clickableIcons: false,
            mapTypeControl: false,
            streetViewControl: false
        });

        this.directionsService = new google.maps.DirectionsService;
        this.directionsDisplay = new google.maps.DirectionsRenderer();
        this.directionsDisplay.setMap(this.map);

        if (this.options['traffic']) {
            var trafficLayer = new google.maps.TrafficLayer();
            trafficLayer.setMap(this.map);
        }

        var pinColorGreen = "20d24a";
        var pinImageGreen = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColorGreen,
            new google.maps.Size(21, 34),
            new google.maps.Point(0,0),
            new google.maps.Point(10, 34));
        var pinImageMyself = new google.maps.MarkerImage("/smartVISU/pics/phone/myself.jpg" ,
            null, null, null, new google.maps.Size(40, 40));
        var pinShadow = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_shadow",
            new google.maps.Size(40, 37),
            new google.maps.Point(0, 0),
            new google.maps.Point(12, 35));

        this.marker_home = new google.maps.Marker({
            map: this.map,
            icon: pinImageGreen,
            shadow: pinShadow,
            title:' Home '
        });

        this.marker_myself = new google.maps.Marker({
            map: this.map,
            icon: pinImageMyself,
            title:' <Mein Name>',
            zIndex:99999999
        });
    },

    _update: function(response) {

        this.map.setCenter({lat: response[0], lng: response[1]});
        var pos = new google.maps.LatLng(parseFloat(response[0]),parseFloat(response[1]));
        this.marker_myself.setPosition(pos);
        if (response[2] && response[3]) {
            var pos_home = new google.maps.LatLng(parseFloat(response[2]),parseFloat(response[3]));
            this.marker_home.setPosition(pos_home);
            if (response[6] && response[7] && (response[4] == 1 || response[5] == 1)) {
                if (response[4] == 1) {
                    var destination = { lat: parseFloat(response[2]), lng: parseFloat(response[3]) };
                } else if (response[5] == 1) {
                   var destination = { lat: parseFloat(response[6]), lng: parseFloat(response[7]) };
                };
                var directionsDisplay = this.directionsDisplay;
                this.directionsDisplay.setMap(this.map);
               this.directionsService.route({
                    origin: pos,
                    //provideRouteAlternatives: true,
                    destination: destination,
                    travelMode: google.maps.TravelMode.DRIVING
                }, function(result, status) {
                    if (status === google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(result);
                    } else {
                        console.log('Directions request failed due to ' + status);
                    }
                });
            } else {
                if(this.directionsDisplay != null) {
                    this.directionsDisplay.setMap(null);
               }
           }
        }
    }
})

gmaps.html

// dropins/widgets/gmaps.html - API Key für Google Directions angeben!
/**
 * Displays a google maps map with current, home and work position, as well as routing
 *
 * @param unique id for this widget
 * @param a gad/item for latitude
 * @param a gad/item for longitude
 * @param a gad/item for home latitude
 * @param a gad/item for home longitude
 * @param a gad/item for bool flag, if route to home shall be calculated
 * @param a gad/item for bool flag, if route to work shall be calculated
 * @param a gad/item for work latitude
 * @param a gad/item for work longitude
 * @param traffic information on (=1) or off (=0)
 */
{% macro map(id, gad_lat, gad_lon, gad_home_lat, gad_home_lon, gad_calculate_way_home, gad_calculate_way_work, gad_work_lat, gad_work_lon, traffic) %}
    <div id="{{ uid(page, id) }}" style="width: 100%; height: 400px;" data-traffic="{{ traffic }}" data-widget="gmaps_map" data-item="{{ gad_lat }}, {{ gad_lon}}, {{ gad_home_lat }}, {{ gad_home_lon }}, {{ gad_calculate_way_home }}, {{ gad_calculate_way_work }}, {{ gad_work_lat }}, {{ gad_work_lon }}"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=MeinApiKey"></script>
{% endmacro %}

Das widget wird im "example1.smarthome/EG.Marco.html" als letzter Block eingefügt

<div class="block" style="width: 100%;">
  <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">
      <h3>Verkehr:
      {{ basic.symbol('travel_info.calculate_way_home', 'travel_info.calculate_way_home', 'Nach Hause via ', '', '1') }}
      {{ basic.symbol('travel_info.calculate_way_work', 'travel_info.calculate_way_work', 'Zur Arbeit via ', '', '1') }}
      {{ basic.print('travel_info.travel_summary', 'travel_info.travel_summary', 'text') }}
      </h3>
      {{ gmaps.map('trafficmap', 'location.lat', 'location.lon', 'location.home.lat', 'location.home.lon', 'travel_info.calculate_way_home', 'travel_info.calculate_way_work', 'location.work.lat', 'location.work.lon', '1') }}
    </div>
  </div>
</div>

Und noch einmal die Ausgabe der console beim Laden der Seite
Screenshot (6).png

Vielleicht findet jemand den Fehler?!

Danke!

Gruß, Max

[Max2612]

Ich hab einen vlt. interresanten Link gefunden.

https://stackoverflow.com/questions/...fined-only-whe

Ich verstehe nur den Code nicht.
Aber könnte es daran liegen?

[psilo]

Gibt es die Parameter bei Dir jetzt alle als Item? Weil das letzte Mal hattest Du die ja noch nicht?

Der Link hilft eher wenig. Die API müsste eigentlich während dem Laden der Seite initialisiert werden.. Wenn es ne generelle Unverträglichkeit gäbe, hätte ich diese ja auch..

Die asynchrone API mit Callback habe ich zudem nach Diskurs mit smai nicht verwendet, da es hier wohl Probleme mit dem Widget gibt

[psilo]

Noch eine Idee: prüfe bitte mal in Deinem HTML (wenn du mit dem browser auf die Visu gehst), ob das <script src="https://maps.googleapis.com/maps/api/js?key=MeinApiKey"></script> wirklich da ist.

Evtl hat das autoinclude des gmaps.html aus dem dropins/widgets nicht geklappt?!

[Max2612]

Noch eine Idee: prüfe bitte mal in Deinem HTML (wenn du mit dem browser auf die Visu gehst), ob das <script src="https://maps.googleapis.com/maps/api/js?key=MeinApiKey"></script> wirklich da ist.

Evtl hat das autoinclude des gmaps.html aus dem dropins/widgets nicht geklappt?!

Wie meinst du das genau?

Ich habe schon die 2 Dateien in meinen page-Ordner geschoben und von dropins gelöscht und mit import widget... versucht. Leider keine Änderung.

Zu den items: Nein, die gibt's noch nicht. Nach dem laden der html ohne widget, einfügen des widgets, aktualisieren mit F5, klappt ja alles. Dann kann's doch nicht mit den items zusammenhängen, oder doch??

[psilo]

Webseite öffnen im Browser, Rechtsklick -> HTML Quelltext anzeigen -> Stelle suchen, wo die Google API eingebunden wird.

Ich würde zudem die Parameter mit den nicht existenten Items weglassen. K.A. wie der Effekt ist, wenn man ein Item als Parameter added dass es nicht gibt...

[Max2612]

OK, werde ich morgen testen.

[Max2612]

So, neuer Tag, neues Glück...

Das mit dem HTML Quelltext anzeigen geht nicht. Es öffnet ja nichtmal die Seite.
Es sollte die page "Büro Marco' öffnen. Es ist aber nur der "Ladekreis" zu sehen und es passiert nichts mehr.
Hier mal ein Screenshot

Screenshot (7).png


Folgender Code funktioniert direkt in der page.html

<div id="map" style="width: 100%; height: 400px;"></div>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxxxxxxxxx9WcgVn8zMCcFi98Jo1C4&callback=initMap&signed_in=false" async defer> </script>

    <script>        
            function initMap() {
              var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 5,
                center: {lat: 46.7421789, lng: 11.102298},
        disableDefaultUI: false,
                clickableIcons: false,
                mapTypeControl: false,
        streetViewControl: false
              

        });

         var marker = new google.maps.Marker({
                    position: {lat: 48.7421789, lng: 9.102298 },
                    map: map,
                    title:' marker '
                 });

        

              
            }
    </script>

Wie oder was müsste man hier umbauen, dass zB die marker Koordinaten über items funktionieren??
Das würde mir ja schon reichen...

Danke!