Google maps, geocoding, ikona

Programiranje
1

Geocoding koristim da bi iz adrese našao koordinate. Sad ne znam kako postaviti različite ikone za lokacije

    <div id="map"></div>
<script>

    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: {lat: 45.79, lng: 16}
      });
      var geocoder = new google.maps.Geocoder();
      geocodeAddress(geocoder, map);
    }

    var adrese = [
      ['Ilica 300, Zagreb', 'https://developers.google.com/maps/documentation/javascript/examples/full/images/parking_lot_maps.png'],
      ["Ilica 100, Zagreb", "https://developers.google.com/maps/documentation/javascript/examples/full/images/library_maps.png"],
      ["Ilica 10, Zagreb", "https://developers.google.com/maps/documentation/javascript/examples/full/images/parking_lot_maps.png"],
      ["Masarykova ulica 15, Zagreb", "https://developers.google.com/maps/documentation/javascript/examples/full/images/parking_lot_maps.png"]
    ];

    function geocodeAddress(geocoder, resultsMap) {
      for (i = 0; i < adrese.length; i++) {
        var x = adrese[i][1];
        document.getElementById("adrese_ispis").innerHTML += adrese[i][0] + ' ' + x + '<br>';
        geocoder.geocode({'address': adrese[i][0]}, function(results, status) {
          if (status === 'OK') {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
              icon: x, //pretpostavljam da bi ovdje išla ikona, ali mi je prikaz za sve zadnja ikona, trebale bi se mijenjati
              position: results[0].geometry.location,
              map: resultsMap
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }
    }
</script>
2

Ovako na prvu sve izgleda ok.

Sve ove adrese sto imas imaju istu ikonu, osim prve u nizu, da nije to razlog toga sto ti prikazuje samo jednu te istu :smiley: ?

Moguce je da ti za tu adresu sa razlicitom ikonom dohvati pogresne koordinate, pa se marker renderuje negdje van trenutnog range-a tj. ne vidis u momentu gdje je marker renderovan.

3

Mijenjao sam u međuvremenu i ikone i ništa, prikaže samo zadnju. Stavio sam sve 4 različite i ista stvar.

Stavim i samo dvije adrese i prikaže samo zadnju.

4

Au tek sad vidim koji problem imas.

geocoder.geocode je asinhrona funkcija sto znaci da ce se loop prvo izvrsiti, zatim ce geocoder.geocode potraziti vrijednost za adrese[i] a i ce u tom momentu biti zadnji index i zbog toga ce se renderovati zadnja vrijednost.

Jedna vrlo jednostavna solucija je da koristis let umjesto var

function geocodeAddress(geocoder, resultsMap) {
    for (let i = 0; i < adrese.length; i++) {
        let x = adrese[i][1];
        document.getElementById("adrese_ispis").innerHTML += adrese[i][0] + ' ' + x + '<br>';
        geocoder.geocode({'address': adrese[i][0]}, function(results, status) {
            if (status === 'OK') {
                resultsMap.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    icon: x, //pretpostavljam da bi ovdje išla ikona, ali mi je prikaz za sve zadnja ikona, trebale bi se mijenjati
                    position: results[0].geometry.location,
                    map: resultsMap
                });
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }
}

Druga opcija je da koristis IIFE i samim tim kreiras closure oko geocoder.geocode

function geocodeAddress(geocoder, resultsMap) {
    for (i = 0; i < adrese.length; i++) {
        (function(index) {
            var x = adrese[index][1];
            document.getElementById("adrese_ispis").innerHTML += adrese[index][0] + ' ' + x + '<br>';
            geocoder.geocode({'address': adrese[index][0]}, function(results, status) {
                if (status === 'OK') {
                    resultsMap.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        icon: x, //pretpostavljam da bi ovdje išla ikona, ali mi je prikaz za sve zadnja ikona, trebale bi se mijenjati
                        position: results[0].geometry.location,
                        map: resultsMap
                    });
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        })(i);
    }
}
2 Likeova
5

Hvala,
promijenio sam var u let i sada radi.