Google Maps mit verkehrslage

[psilo]

sieht die ausgangsseite für den link immer so kaputt aus? oder passiert das erst nach dem klicken?

du hattest auch nen haufen deprecated warnungen usw.. ich würde echt mal eine leere page machen und direkt aufrufen, wo du das einbettest..

um das was du willst umzubauen, musst du genauso wie ich ein neues widget schreiben und die synchrone API ohne callback funktion schreiben...

[Max2612]

Das ist eine Beispielseite von v2.9. Die nehme ich nur zum testen.
Auch mit einer neuen, leeren html ändert sich nichts. Und die items kann ich auch ausschließen.

Es muss doch irgendetwas mit dem laden der Seite zu tun haben...
Warum geht es, wenn ich die Seite lade und erst bei geladener Seite das Widget einfüge?

Ich werd hier noch wahnsinnig...

PS: Würde mich freuen, wenn ein anderer User das widget mal testen könnte.

[psilo]

Ich werd hier noch wahnsinnig...

Ich auch bald ;-) Wollte doch nur nen Artikel schreiben und gebe schon abendeweise während ich im Bett liege Support ...

Du kannst mal das gmaps.js rausnehmen aus Dropins und dann schauen ob die seite lädt

[Max2612]

Ich bin dir auch echt dankbar dafür

Also ohne gmaps.js lädt die Seite. Aber ohne Karte...
Was sagt uns das jetzt??

[psilo]

dass du jetzt im html schauen kannst, ob die google geschichte eingebunden ist

[Max2612]

 [TABLE]
 	 		[TR]
 			[TD]<div class="block" style="width: 100%;">[/TD]
 		[/TR]
 		[TR]
 			[TD] [/TD]
 			[TD]<div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">[/TD]
 		[/TR]
 		[TR]
 			[TD] [/TD]
 			[TD]<div data-role="collapsible" data-collapsed="false">[/TD]
 		[/TR]
 		[TR]
 			[TD] [/TD]
 			[TD]<h3>Verkehr:</h3>[/TD]
 		[/TR]
 		[TR]
 			[TD] [/TD]
 			[TD] [/TD]
 		[/TR]
 		[TR]
 			[TD] [/TD]
 			[TD]<div id="room_sleeping-trafficmap" style="width: 100%; height: 400px;" data-traffic="" data-widget="gmaps_map" data-item="location.lat, location.lon, , , , , , "></div>[/TD]
 		[/TR]
 		[TR]
 			[TD] [/TD]
 			[TD]<script src="[URL="https://maps.googleapis.com/maps/api/js?key=AIzaSyDU23Uq8oJgpU79WcgVn8zMCcFi98Jo1C4"]https://maps.googleapis.com/maps/api...8zMCcFi98Jo1C4[/URL]"></script>[/TD]
 		[/TR]
 		[TR]
 			[TD] [/TD]
 			[TD] [/TD]
 		[/TR]
 		[TR]
 			[TD] [/TD]
 			[TD]</div>[/TD]
 		[/TR]
 		[TR]
 			[TD] [/TD]
 			[TD]</div>[/TD]
 		[/TR]
 		[TR]
 			[TD] [/TD]
 			[TD]</div>[/TD]
 		[/TR]
 	 [/TABLE]

Das sollte doch soweit passen, oder??

Edit: Nach wieder einfügen der gmaps.js in dropins wurde auch die Karte wieder angezeigt.
SmartVISU geschlossen, wieder geöffnet, Seite geladen >> Uncaught ReferenceError: google is not defined

[psilo]

hmm ich glaube nicht mehr, dass das dann mit dem widget zu tun hat. smai kann das an den dropins liegen? bspw dass das JS ausgeführt wird, bevor das html eingebunden wird?

[psilo]

Hier testweise eine simplere Version des Widgets:

{{ gmaps.simple_map('trafficmap_simple', 'location.lat', 'location.lon') }}

/**
* Displays a simple google maps map
*
* @param unique id for this widget
* @param a gad/item for latitude
* @param a gad/item for longitude
*/
{% macro simple_map(id, gad_lat, gad_lon) %}
<div id="{{ uid(page, id) }}" style="width: 100%; height: 400px;" data-widget="gmaps_simplemap" data-item="{{ gad_lat }}, {{ gad_lon}}"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=apikey"></script>
{% endmacro %}

$.widget("sv.gmaps_simplemap", $.sv.widget, {
    initSelector: 'div[data-widget="gmaps_simplemap"]',

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

        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));
        this.marker_myself = new google.maps.Marker({
            map: this.simple_map,
            icon: pinImageGreen,
            title:' <Mein Name>',
            zIndex:99999999
        });
    },

    _update: function(response) {
        this.simple_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);
    }
});

Im Artikel ist diese nun auch integriert (am Ende)!

[Max2612]

Cool!
Freue mich schon aufs testen.

Geht aber erst morgen...

[psilo]

ich wette es geht auch nicht weil er bei dir die google api nicht initialisiert.. ich denke aber das ist nur eine Auswirkung eines anderen widgets

[Max2612]

Ich teste ja auf einem frischen sv2.9. Da sollte doch kein anderes widget dazwischen funken?!

Was kann ich noch machen, dass es “perfekte Testbedingungen“ sind. Es liegt doch daran, dass irgendetwas schon geladen wird, obwohl etwas anderes noch nicht fertig ist. Verstehe ich das richtig?
Raspi zu langsam??

Bin irgendwie ratlos

[psilo]

du hattest deprecated warnungen. oder hast du alle pages geloescht. stell mal die widgets auf 2.9er um

[smai]

kann das an den dropins liegen? bspw dass das JS ausgeführt wird, bevor das html eingebunden wird?

An den dropins nicht, diese werden direkt ins generierten HTML integriert.
Aber es liegt wohl am Ladezyklus von jQuery Mobile. Dazu würde auch passen, dass es sich bei Reload anders verhält als beim Navigieren.
Nach genauerem Betrachten erstaunt es mich, dass es bei psilo überhaupt zu funktionieren scheint.

Kurzer Diskurs dazu:
In jQM wird nur die erste Seite (also Eingabe einer URL oder Reload) vollständig ins DOM geladen. Beim Navigieren wird das HTML der Ziel-Seite per AJAX geladen und davon dann nur der Inhalt des Tags mit dem Attribut data-role="page" in das DOM eingefügt.
Dadurch verhält sich eine Seite beim Navigieren innerhalb der smartVISU manchmal etwas anders als beim Neuladen (und als man es von normalen Webseiten kennt). So wird z.B. beim Navigieren kein window.onload und kein jQuery $(document).ready Event ausgelöst.
Dafür gibt es diverse Events für den jQM Pagecontainer. Diese sind zu finden unter https://api.jquerymobile.com/pagecontainer/.

Das _create der Widgets wird ausgeführt, gleich nachdem das HTML im DOM eingefügt wurde. Zu diesem Zeitpunkt ist das Script von Google aber noch nicht geladen, weil es ja eben erst eingebunden wurde.

Wegen solchen Effekten ist es nicht gut, ein Script direkt in einem Twig-Macro (oder auch im Body einer eigenen Page) einzufügen.
Und es gibt noch einen zweiten Grund, dies nicht im Macro zu tun: Dieses <script>-Tag im Macro wird bei jeder Verwendung des Makros erneut ins HTML eingefügt. Wenn das Widget mehrmals verwendet wird, wird also auch das Script mehrmals ausgeführt.
Das Google_Script zeigt dann sogar einen Fehler an: You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.


Nun ist natürlich die Frage, wie man denn ein Script in einem Widget korrekt lädt.
Diese Frage ist leider so gut, dass mir keine einfache Antwort einfällt. Meine relativ komplizierte Idee sieht folgendermassen aus:

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

    options: {
        'traffic': null,
    },

    _create: function () {
        this._super();
[MARKIEREN]        this._create_map();
    },

    _create_map: function () {
        try {
            this.map = new google.maps.Map(this.element[0], {
                zoom: 11,
                disableDefaultUI: false,
                clickableIcons: false,
                mapTypeControl: false,
                streetViewControl: false
            });
        }
        catch(e) {
            if(e.name == "ReferenceError") { // google maps script not loaded yet
                var that = this;
                // google maps script is already loading in another widget
                if(window.google_maps_loading) { 
                    window.setTimeout(function() { that._create_map() }, 100)
                    return;
                }
                // google maps script is not loading
                window.google_maps_loading = true;
                $.ajax({
                    url: 'https://maps.googleapis.com/maps/api/js?key=<apikey>',
                    dataType: "script",
                    complete: function() { window.google_maps_loading = false; that._create_map() }
                });
                return;
            }
            else  // other exceptions should be trown
                throw e;
        }
[/MARKIEREN]
        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) {

[MARKIEREN]        if(!this.map) {
            var that = this;
            window.setTimeout(function() { that._update(response) }, 100)
            return;
        }
[/MARKIEREN]
        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);

        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);
            }
        }
    }
})

Beachtet, dass auf Zeile 35 der API-Key eingetragen werden muss.
Dafür fällt dann in gmaps.html das <script...></script> weg.

[psilo]

Kann die Lösung lauffähig nachstellen.

Max2612 kannst du mal nachtesten? dann passe ich den artikel an

angepasste einfache version:

$.widget("sv.gmaps_simplemap", $.sv.widget, {
    initSelector: 'div[data-widget="gmaps_simplemap"]',

    _create: function () {
        this._super();
        this._create_map();
    },

    _create_map: function () {
        try {
            this.map = new google.maps.Map(this.element[0], {
                zoom: 11,
                disableDefaultUI: false,
                clickableIcons: false,
                mapTypeControl: false,
                streetViewControl: false
            });
        }
        catch (e) {
            if (e.name == "ReferenceError") { // google maps script not loaded yet
                var that = this;
                // google maps script is already loading in another widget
                if (window.google_maps_loading) {
                    window.setTimeout(function () {
                        that._create_map()
                    }, 100)
                    return;
                }
                // google maps script is not loading
                window.google_maps_loading = true;
                $.ajax({
                    url: 'https://maps.googleapis.com/maps/api/js?key=apikey',
                    dataType: "script",
                    complete: function () {
                        window.google_maps_loading = false;
                        that._create_map()
                    }
                });
                return;
            }
            else  // other exceptions should be thrown
                throw e;
        }

        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));
        this.marker_myself = new google.maps.Marker({
            map: this.map,
            icon: pinImageGreen,
            title:' Mein Name',
            zIndex:99999999
        });
    },

    _update: function(response) {
        if(!this.map) {
            var that = this;
            window.setTimeout(function() { that._update(response) }, 100)
            return;
        }

        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);
    }
});

/**
* Displays a simple google maps map
*
* @param unique id for this widget
* @param a gad/item for latitude
* @param a gad/item for longitude
*/
{% macro simple_map(id, gad_lat, gad_lon) %}
<div id="{{ uid(page, id) }}" style="width: 100%; height: 400px;" data-widget="gmaps_simplemap" data-item="{{ gad_lat }}, {{ gad_lon}}"></div>
{% endmacro %}

[Max2612]

smai, psilo

Beide Varianten getestet. Perfekt!!