Google Maps Api v3 Problem

[melanie77]

Halli Hallo

Ich hab ein grosses Problem mit Google Maps:

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 infowindow;
    var test;
    var adresses = JSON.parse(adr)
    for (var key in adresses) {
    function initialize() {
        geocoder = new google.maps.Geocoder();

        var mapOptions = {
            zoom: zoom,
            center: codeAddress(),
            styles: grey
        };

        map = new google.maps.Map(document.getElementById(div), mapOptions);

    }


        var obj = adresses[key]

        for (var prop in obj) {


            var row = obj[prop];


            var address = row.street + ' ' + row.zipcode + ' ' + row.city;
            var image = 'meineBilder/' + row.marker;
            var content = '<div class="infowindow">' + '<h5>' + row.city + '</h5><div>' + row.street + '</div>';

            
            console.log(row)

            function codeAddress() {

                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
                        }).open(map, marker);

                    }

                })
            }

        }

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

}

Es wird mir immer die letzte Adresse als Marker angezeigt. Irgendwas stimmt mit der Scheife wohl nicht

 

[Dormilich]

du überschreibst ja auch deine beiden Funktionen bei jedem Schleifendurchlauf. logisch daß da nur die beiden letzten Definitionen ausgeführt werden.

 

[kkapsner]

Wie ist denn adresses genau aufgebaut und was willst du denn eigentlich genau machen? Für mich ergibt der Code irgendwie nicht besonders viel Sinn.

- - - Aktualisiert - - -

@Dormilich: da die Funktionen gehoistet werden, werden sie auch nicht überschrieben...

 

[melanie77]

Ich habe mehrere Adressen die als Marker mit Infofenster auf einer Google-Maps Karte angezeigt werden sollen. Problematisch ist, wie oben beschrieben, dass nur die letzte Adresse angezeigt wird. Die Adressen kommen als PHP Array an ein Template und werden von dort aus als Json in die Funktion maps geliefert.

 

[Dormilich]

dann haben wir halt das übliche Closure-Problem. Zur Runtime existiert nur der letzte Wert.

 

[melanie77]

aber wie kann ich das lösen, ich kenne mich mit js nicht wirklich gut aus :-(

 

[Dormilich]

du mußt die Google Maps API für jede Adresse separat aufrufen, nicht nur ein einziges Mal.

 

[melanie77]

Das geht nicht, da bekomme ich den fehler, dass ich die Api mehrfach aufgerufen habe

- - - Aktualisiert - - -

wenn ich es so mache, bekomme ich alle marker und infofenster, Die Marker sind auch auf der richtigen Position aber das Markersymbol, sowie die Daten des Infofensters sind wieder von der Letzten Adresse :-(

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 infowindow;
    var test;
    var adresses = JSON.parse(adr)

    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]

            for (var prop in obj) {

                var row = obj[prop];

                var address = row.street + ' ' + row.zipcode + ' ' + row.city;

                var image ='myimages/' + row.marker;

                var content = '<div class="infowindow">' + '<h5>' + row.city + '</h5><div>' + row.street + '</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
                        }).open(map, marker);

                    }

                })
            }
        }

    };

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

}

 

[kkapsner]

Die Adressen kommen als PHP Array an ein Template und werden von dort aus als Json in die Funktion maps geliefert.

Wir brauchen die Information etwas genauer. Zeig' doch einfach, wie das JSON aussieht.

Mit deinem letzten Code hast du wieder das Problem, dass der Callback (die Funktion in dem Aufruf von geocoder.geocode) nicht den Variableninhalt, sondern wirklich die Variable bindet. Dadurch wird dann bei image und content der Inhalt, der nach der Schleife enthalten ist, verwendet, denn die FUnktion wird asynchron ausgeführt. Wenn die Adressen auch im JSON in einem Array sind, würde ich einfach mit ARRAY.forEach() arbeiten (das for...in ist dann sowieso falsch).