[JQUERY] jQuery 3 Probleme

[olliks1973]

Hallo, dieses Script geht leider in jQuery 3 nicht mehr

function maps(adr, uid, zoom) {
    var grey = [
        {featureType: "all", stylers: [{saturation: -100}, {gamma: 1}]}
    ];
    var map;
    var div = 'map_' + uid;
    var zoom = parseInt(zoom);
    var adresses = JSON.parse(adr)
    var infowindow;
    function initialize() {
        var mapOptions = {
            zoom: zoom,
            center: codeAddress(),
            styles: grey
        };
        map = new google.maps.Map(document.getElementById(div), mapOptions);
    }
    function codeAddress() {
            for (var key in adresses) {
                var obj = adresses[key]
                $(function () {
                    var address = obj.street + ' ' + obj.zipcode + ' ' + obj.city;
                    var image = 'typo3conf/ext/okce/Resources/Public/Icons/Markers/' + obj.marker;
                    var content = '<div class="infowindow">' + '<h5>' + obj.header + '</h5><div>' + obj.street + '</div><div>' + obj.zipcode + ' ' + obj.city + '</div>';
                    geocoder = new google.maps.Geocoder();
                    geocoder.geocode({'address': address}, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            var marker = new google.maps.Marker({
                                map: map,
                                icon: image,
                                position: results[0].geometry.location
                            });
                            var infowindow = new google.maps.InfoWindow({
                                content: content,
                                maxWidth: 200,
                            });
                            infowindow.open(map, marker);
                            marker.addListener('click', function () {
                                infowindow.close();
                                infowindow = new google.maps.InfoWindow({
                                    content: content,
                                    maxWidth: 200
                                });
                                infowindow.open(map, marker);

                            });
                        }
                    })
                })
            }


    };
    google.maps.event.addDomListener(window, 'load', initialize);
}

Irgendwie wird die Schleife nicht mehr richtig ausgeführt, so dass nur die letzte Adresse einen Marker und ein infofeld erhält. Bei nur einer Adresse geht es einwandfrei

 

[tsseh]

Hallo, dieses Script geht leider in jQuery 3 nicht mehr

das hat nichts mit jQuery zu tun
das callback von geocoder.geocode wird zu irgendeinem zeitpunkt aufgerufen, aber definitiv nachdem die schleife vollständig durchlaufen ist.
zu diesem zeitpunkt ist image und content mit den daten aus dem letzten schleifendurchgang belegt. ALLE marker und infofelder werden damit mit den daten aus dem letzten schleifendurchgang abgefüllt.

 

[olliks1973]

aber mit jquery 1.11.3 funktioniert das ganze. Deshalb bin ich ja auch drauf gekommen, dass es an der jQuery version liegt

 

[tsseh]

das ist ja sogar noch schlimmer. ich wollte gerade schreiben, dass dort ja kein fetzen aus jquery enthalten ist, dann habe ich $(function () { gesehen.
also:
* das callback aus $(function () {}) wird aufgerufen, wenn der dom-tree aufgebaut ist.
* das ganze steht in codeAddress() welche in initialize() aufgerufen wird.
* initialize() wird hier google.maps.event.addDomListener(window, 'load', initialize); gerufen, also im onload
onload kommt aber nach DOMContentLoaded. damit dürfte eigentlich deine schleife nichts machen, da sie ein eventhandler registriert, der nie aufgerufen wird, da das event schon durch ist

- - - Aktualisiert - - -

wobei hier auch nicht klar ist, was codeAddress() in mapOptions.center zu suchen hat.
center ist damit undefined

 

[olliks1973]

wie würde man es denn besser lösen?

- - - Aktualisiert - - -

ich hab es jetzt so gelöst

    function codeAddress() {
        for (var key in adresses) {
            var obj = adresses[key]
            giveAdress();
            function giveAdress() {
                var address = obj.street + ' ' + obj.zipcode + ' ' + obj.city;
                var image = 'typo3conf/ext/okce/Resources/Public/Icons/Markers/' + obj.marker;
                var content = '<div class="infowindow">' + '<h5>' + obj.header + '</h5><div>' + obj.street + '</div><div>' + obj.zipcode + ' ' + obj.city + '</div>';
                geocoder = new google.maps.Geocoder();
                geocoder.geocode({'address': address}, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                            map: map,
                            icon: image,
                            position: results[0].geometry.location
                        });
                        var infowindow = new google.maps.InfoWindow({
                            content: content,
                            maxWidth: 200,
                        });
                        infowindow.open(map, marker);
                        marker.addListener('click', function () {
                            infowindow.close();
                            infowindow = new google.maps.InfoWindow({
                                content: content,
                                maxWidth: 200
                            });
                            infowindow.open(map, marker);

                        });
                    }
                })
            }
        }


    };
    google.maps.event.addDomListener(window, 'load', initialize);
}

 

[tsseh]

    function codeAddress() {
        for (var key in adresses) {
            var obj = adresses[key]
            geocoder = new google.maps.Geocoder();
            geocoder.geocode({'address': address}, function (results, status, obj) {
                var address = obj.street + ' ' + obj.zipcode + ' ' + obj.city;
                var image = 'typo3conf/ext/okce/Resources/Public/Icons/Markers/' + obj.marker;
                var content = '<div class="infowindow">' + '<h5>' + obj.header + '</h5><div>' + obj.street + '</div><div>' + obj.zipcode + ' ' + obj.city + '</div>';
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        icon: image,
                        position: results[0].geometry.location
                    });
                    var infowindow = new google.maps.InfoWindow({
                        content: content,
                        maxWidth: 200,
                    });
                    infowindow.open(map, marker);
                    marker.addListener('click', function () {
                        infowindow.close();
                        infowindow = new google.maps.InfoWindow({
                            content: content,
                            maxWidth: 200
                        });
                        infowindow.open(map, marker);

                    });
                }
            }.bind(this, obj))
        }
    };