Show markers from JSON array on map in Titanium

Question

I'm working on a Titanium application where I need to show multiple markers on a map. I get the data for these markers trough a JSON array, which can be found here. I am getting no errors, I even get the 'Succes' alert, but still nothing is showing on the map.

var pin = [];

var mapview = Ti.Map.createView({
    height : '90%',
    mapType : Ti.Map.STANDARD_TYPE,
    animate : true,
    regionFit : true,
    userLocation : true,
    region : {
        latitudeDelta : 0.05,
        longitudeDelta : 0.05
    }
});


var xhr = Ti.Network.createHTTPClient({
    onload : function(e) {
        var data = JSON.parse(this.responseText);

        for (var i = 0; i < data.length; i++) {
            pin[i] = Titanium.Map.createAnnotation({
                latitude : data.rows[i][7],
                longitude : data.rows[i][8],
                title : data.rows[i][3],
                subtitle : data.rows[i][9],
                pincolor : Titanium.Map.ANNOTATION_PURPLE,
                animate : true,
                myid : i
            });
            mapview.addAnnotation(pin[i]);
        }
        Ti.API.debug(this.responseText);
        alert('success');
    },
    onerror : function(e) {
        Ti.API.debug(e.error);
        alert('error');
    },
    timeout : 5000
});

xhr.open("GET", query);
xhr.send();

win.add(mapview);
win.open();

Any help is very much appreciated!

Answer 1

Finally got it to work. Adjusted the code in the question to this:

var mapview = Ti.Map.createView({
    height : '90%',
    mapType : Ti.Map.STANDARD_TYPE,
    animate : true,
    regionFit : true,
    userLocation : true,
    region : {
        latitudeDelta : 1.7,
        longitudeDelta : 1.7
    }
});

win.add(mapview);


var annotations = [];

var query = '..JSON URL..';
var xhr = Ti.Network.createHTTPClient({
    onload : function(e) {
        var data = JSON.parse(this.responseText);
        Ti.API.info('Datum=' + data.rows[1][0]);
        for (var i = 0; i < data.rows.length; i++) {
            var marker = Titanium.Map.createAnnotation({
                latitude : data.rows[i][7],
                longitude : data.rows[i][8],
                title : data.rows[i][3],
                subtitle : data.rows[i][9],
                pincolor: Ti.Map.ANNOTATION_GREEN,
                animate : true,
                myid : i
            });

            mapview.addAnnotation(marker);

        }
        Ti.API.debug(this.responseText);
    },
    onerror : function(e) {
        Ti.API.debug(e.error);
        alert('error');
    },
    timeout : 5000
});

xhr.open("GET", query);
xhr.send();

This will populate the map with multiple annotations.