JavaScript function does not push object to a global array variable

Question

EDITED: The problem is with the function 'find_callback', I want to insert each of the responses to a global array named responseArray. the response is an array of objects.

I'm trying to add markers to the Waze implementation of OpenLayers from an array of searches. I want to run multiple searches, accumulating the results. I use 3 functions, onInit(), find_callback() and addPoint(). Calling the 'find_callback' function overrides the previous markers. If I run a single search:

g_wzae_map.find('THE LOCATION', 'find_callback');

The response:

/* array of search results (up to 10) sorted by relevancy */
[ {
    //bounds that contain the this map feature (set map to this extent for closest zoom)
    "bounds":{"bottom":32.0880470275879,
    "left":34.7883338928223,
    "right":34.7912673950195,
    "top":32.0854721069336},
    //location of the feature
    "location":{"lat":32.08560397003471,"lon":34.78999763465419},
    //name of feature
    "name":"Street, City"
  },
  //up to 9 more results
  // ...
]

The code as it is

function addPoint(response){
    var first_result = response;
    var lon = first_result.location.lon;
    var lat = first_result.location.lat;
    map.setCenter(new OpenLayers.LonLat(lon,lat));

    var markersPoint = new OpenLayers.Layer.Markers( "Markers" );
    markersPoint.addMarker(
        new OpenLayers.Marker(
            new OpenLayers.LonLat(
                lon,
                lat
                ),
            icon.clone()
            )
        );
    g_waze_map.map.addLayer(markersPoint);

    map.addPopup(
        new OpenLayers.Popup.FramedCloud(
            "point_"+first_result.location.lat,
            new OpenLayers.LonLat(lon,lat),
            null,
            "<div style='font-family:Arial,sans-serif;font-size:0.8em;'>"
            +first_result.name+"<div>",
            anchor=null,
            true,
            null
            )
        );

}


//called when map loads
function onInit(){
    map = g_waze_map.map;

    size    = new OpenLayers.Size(15, 20);
    offset  = new OpenLayers.Pixel(-(size.w/2), -size.h);
    icon    = new OpenLayers.Icon('http://www.waze.co.il/images/home.png',size,offset);         

    // array for the points
    responseArray = new Array();
    // find callback
   find_callback = function(response){
        for (var i=0, length = response.length; i<length; i++){
            responseArray.push(response[i]);
        }
        // alert(responseArray[0]); // working, getting an object
    }
    // alert(responseArray[0]); // not working, getting 'undefined'

    //search API example, calls 'find_callback' when search returns
    g_waze_map.find('Turin','find_callback');
    g_waze_map.find('Rome','find_callback', true);
    // adding the points
    for (var i=0, length = responseArray.length; i<length; i++){
        addPoint(responseArray[i]);
    }
};

Thanks!

Answer 1

g_waze_map.find() is asynchronous, which is why it uses a callback to process results. When find returns, the search results probably aren't available. Instead of calling addPoint from onInit, call it directly in find_callback.

find loads search results in another page, which might be storing the results as a global variable that gets clobbered when later calls reload the page (see why globals are bad?). If that's the case, you can move all but the first call to find to the find callback.

//called when map loads
function onInit(){
    var map = g_waze_map.map;

    var size    = new OpenLayers.Size(15, 20);
    var offset  = new OpenLayers.Pixel(-(size.w/2), -size.h);
    var icon    = new OpenLayers.Icon('http://www.waze.co.il/images/home.png',size,offset);         

    function addPoint(response){
        var first_result = response;
        var lon = response.location.lon;
        var lat = response.location.lat;
        //g_waze_map.map.setCenter(new OpenLayers.LonLat(lon,lat));

        var markersPoint = new OpenLayers.Layer.Markers( "Markers" );
        markersPoint.addMarker(
            new OpenLayers.Marker(
                new OpenLayers.LonLat(lon, lat),
                icon.clone()
        )   );
        g_waze_map.map.addLayer(markersPoint);

        g_waze_map.map.addPopup(
            new OpenLayers.Popup.FramedCloud(
                "point_"+lat, new OpenLayers.LonLat(lon,lat), null,
                "<div style='font-family:Arial,sans-serif;font-size:0.8em;'>"+response.name+"<div>",
                null, true, null
         )  );
    }

    // array for the points; this could be dropped
    var responseArray = [];
    function addPoints(response) {
        // if you want to save the responses for other purposes
        Array.push.apply(responseArray, response);
        for (var i=0, length = response.length; i<length; i++){
            addPoint(response[i]);
        }
    }

    var terms = ['Rome'];
    window.find_callback = function(response){
        addPoints(response);
        if (terms.length) {
            g_waze_map.find(terms.pop(),'find_callback', true);
        }
    }

    g_waze_map.find('Turin','find_callback');
};