Google map api, same icon for each markers

Question

I would like to have a different icon for each of my markers. I have a problem with my code. Only the last item of the array is used. If the query array have 3 items, All the 3 markers will have the 3.png icons.

Thanks for your help!

        var img = new Array();
        img.push("'images/1.png", "images/2.png", "images/3.png", "images/4.png", "images/5.png", "images/6.png", "images/7.png", "images/8.png", "images/9.png");

        var myOptions = {
            scaleControl: true,
            streetViewControl: false,
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map_canvas'),
        myOptions);

        var markers = new Array(query.length);

        for (i=0;i<query.length;i++)
        {
            var geocoder = new google.maps.Geocoder();
            var address = query[i];

            var image = new google.maps.MarkerImage(
            img[i],
            new google.maps.Size(24,24),
            new google.maps.Point(0,0),
            new google.maps.Point(24,24)
            );

            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    markers[i] = new google.maps.Marker({
                        title:"Marker "+i,
                        icon: image,
                        map: map,
                        position: results[0].geometry.location
                    });
                    markers[i].setMap(map); 
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });


        };

    }

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

Answer 1

Accessing the google's geocoding service is asynchronous

This should solve your problem,

    var img = new Array();
    img.push("'images/1.png", "images/2.png", "images/3.png", "images/4.png", "images/5.png", "images/6.png", "images/7.png", "images/8.png", "images/9.png");

    var myOptions = {
        scaleControl: true,
        streetViewControl: false,
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('map_canvas'),
    myOptions);

    var markers = new Array(query.length);
    var images = new Array(query.length);

    for (i=0;i<query.length;i++)
    {
        var geocoder = new google.maps.Geocoder();
        var address = query[i];

        var image = new google.maps.MarkerImage(
        img[i],
        new google.maps.Size(24,24),
        new google.maps.Point(0,0),
        new google.maps.Point(24,24)
        );

        images[i] = image;

        geoCode(i);

   };

    function geoCode(i){

           geocoder.geocode({ 'address': address }, function (results, status) {

            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                markers[i] = new google.maps.Marker({
                    title: results[0].formatted_address,
                    icon: images[i],
                    map: map,
                    position: results[0].geometry.location
                });
                markers[i].setMap(map); 
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }


}

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

Answer 2

Seems that you always get the same i in the callback passed to geocode . You may want to try a solution like one suggested .