Flash and Google Maps - Only Last Icon showing

Question

I have a simple Map and geocoding sample in Flash using CS4

The problem is simple - I can retrieve a short list from the google search api, but when I try to generate the icons on the map using a loop, only the last icon is displayed. (ignore the house icon, it is generated earlier)

I feel I am missing something or made a stupid AS3 mistake (like treating it as if it was c#) - or even a stupid wood-for-the-trees mistake. The problem is in the last line of the code.

I have added all my code just in case somebody else can find a use for it - lord knows it took me a great while to figure this out :)

It runs here

(also, if anybody has an idea why the icon is slightly in the wrong place on render, but corrects if you move the map - please let me know)

Any help would be great.

Thanks. P

import com.google.maps.services.ClientGeocoder;
import com.google.maps.services.GeocodingEvent;
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.styles.FillStyle;
import com.google.maps.styles.StrokeStyle;
import com.google.maps.controls.*
import com.google.maps.overlays.*
import flash.display.Bitmap;
import flash.display.BitmapData;

import com.adobe.utils.StringUtil;
import be.boulevart.google.ajaxapi.search.GoogleSearchResult;
import be.boulevart.google.events.GoogleApiEvent;
import be.boulevart.google.ajaxapi.search.local.GoogleLocalSearch;
import be.boulevart.google.ajaxapi.search.local.data.GoogleLocalSearchItem;


var strZip:String = new String();
strZip="60661"; 

var strAddress:String = new String();
strAddress ="100 W. Jackson Blvd, chicago, IL 60661";


var IconArray:Array = new Array;
var SearchArray:Array = new Array;

/*--------------------------------------------------------------
// The returned search data gets placed into this array
---------------------------------------------------------------*/

var LocalInfo:Array = new Array();
var intCount:int = new int;

var intMapReady:int=0;

/*===================================================================================
  We load the map first and then get the search criteria - this will keep the order of
  operation clean.  The 
====================================================================================*/

var map:Map = new Map();

map.key = "ABQIAAAAHwSPp7Lhew456ffD6qa2WmxT_VwdLJEfmcCgytxKjcH1jLKkiihQtfC-  TbcwryvBQYhRwHWa8F_Gp9Q";

map.setSize(new Point(600, 550));
map.addEventListener(MapEvent.MAP_READY, onMapReady);

//Places the map on the page
this.addChild(map);
map.x=5;
map.y=5;


function onMapReady(event:Event):void 
{  
 //Center the map and place the house marker
 doGeocode();
}

/*==========================================================================
 Goecode to return the LAT and LONG for the specific address, center
 the map and add the house icon
===========================================================================*/

function doGeocode()
{
    var geocoder:ClientGeocoder = new ClientGeocoder();

    geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS,
    function(event:GeocodingEvent):void {

    var objPlacemarks:Array = event.response.placemarks;

    if (objPlacemarks.length > 0) 
    {
        map.setCenter(objPlacemarks[0].point, 14, MapType.NORMAL_MAP_TYPE);

        var request:URLRequest = new URLRequest("house.png"); 
        var imageLoader:Loader = new Loader(); 
        imageLoader.load(request); 

        var objMarkerOptions:MarkerOptions = new MarkerOptions();
        objMarkerOptions.icon=imageLoader;
        objMarkerOptions.icon.scaleX=.15;
        objMarkerOptions.icon.scaleY=.15;
        objMarkerOptions.iconAlignment = MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER;
        var objMarker:Marker = new Marker(objPlacemarks[0].point, objMarkerOptions); 
        map.addOverlay(objMarker);

        doLoadSearch()
    }
});

//Failure code - good practice, really
geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE,
    function(event:GeocodingEvent):void {
    txtResult.appendText("Geocoding failed");
    });

    // generate geocode
    geocoder.geocode(strAddress);
}

/*===============================================================
   XML Loader - loads icon file and search text pair from xml file
=================================================================*/

function doLoadSearch()
{
    var xmlLoader:URLLoader = new URLLoader();
    var xmlData:XML = new XML(); 
    xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
    xmlLoader.load(new URLRequest("config.xml"));

    function LoadXML(e:Event):void
    {
        xmlData = new XML(e.target.data);
        RetrieveSearch();
    }

    function RetrieveSearch()
    {  
        //extract the MapData subset
        var xmlSearch = xmlData.MapData;

        // push this to an xml list object
        var xmlChildren:XMLList =  xmlSearch.children();

        //loop the list and extract the data into an
        //array of formatted search criteria

        for each (var Search:XML in xmlChildren) 
        {
            txtResult.appendText("Searching For: "+Search.Criteria+" Icon=" + Search.Icon+ "Zip=" + strZip +"\r\n\r\n");
            //retrieve search criteria
            loadLocalInfo(Search.Criteria,Search.Icon,strZip);

        }
    }
}

/*==================================================================================
Search Functionality - does a google API search and loads the lats and longs required 
to place the icons on the map  - THIS WILL NOT RUN LOCALLY
===================================================================================*/


function loadLocalInfo(strSearch,strIcon,strZip)
{
    var objLocal:GoogleLocalSearch=new GoogleLocalSearch()
    objLocal.search(strSearch+" "+strZip,0,"0,0","","")
    objLocal.addEventListener(GoogleApiEvent.LOCAL_SEARCH_RESULT,onSearchComplete)

    function onSearchComplete(e:GoogleApiEvent):void
    {

        var resulta:GoogleSearchResult=e.data as GoogleSearchResult;

        //------------------------------------------------
        // Load the icon for this particular search
        //------------------------------------------------

        var request:URLRequest = new URLRequest(strIcon); 
        var imageLoader:Loader = new Loader(); 
        imageLoader.load(request);         

        //-------------------------------------------------------------
        // For test purposes

        txtResult.appendText("Result Count for "+strSearch+" = "+e.data.results.length+"\r\n\r\n");

        for each (var result:GoogleLocalSearchItem in e.data.results as Array)
        {
            LocalInfo[intCount]=[String(result.title),strIcon,String(result.latitude),String(result.longitude)];

            //---------------------------------------
            // Pop the icon onto the map
            //---------------------------------------

            var objLatLng:LatLng = new LatLng(parseFloat(result.latitude), parseFloat(result.longitude)); 
            var objMarkerOptions:MarkerOptions = new MarkerOptions();
            objMarkerOptions.icon=imageLoader;   
            objMarkerOptions.hasShadow=false;
            objMarkerOptions.iconAlignment = MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER;
            var objMarker:Marker = new Marker(objLatLng, objMarkerOptions); 

            /**********************************************************
              *Everything* works to here - I have traced out execution 
              and all variables. It only works on the last item
              in the array :(
            ***********************************************************/

            map.addOverlay(objMarker);
        }

    }
}

Answer 1

Well - after a few more hours of staring at the screen I started to take out attributes and see what I got.

I started with removing the icon from the MarkerOptions - and lo and behold, up popped a bunch of generic markers on my map - so the problem was with loading the icon.

So I moved the imageLoader functionality inside the loop, as below and it worked. Amazing what a good nights sleep and a bucket of tea will do for you.

Off to the next problem - centering the search using co-ordinates - yay.

.....

    var request:URLRequest = new URLRequest(strIcon);  

    //------------------------------------------------------------- 
    // For test purposes 

    txtResult.appendText("Result Count for "+strSearch+" = "+e.data.results.length+"\r\n\r\n"); 

    for each (var result:GoogleLocalSearchItem in e.data.results as Array) 
    { 
        LocalInfo[intCount]=[String(result.title),strIcon,String(result.latitude),String(result.longitude)]; 


    var imageLoader:Loader = new Loader();  
    imageLoader.load(request);          

        //--------------------------------------- 
        // Pop the icon onto the map 
        //--------------------------------------- 

        var objLatLng:LatLng = new LatLng(parseFloat(result.latitude), parseFloat(result.longitude));  
        var objMarkerOptions:MarkerOptions = new MarkerOptions(); 
        objMarkerOptions.icon=imageLoader;    
        objMarkerOptions.hasShadow=false; 
        objMarkerOptions.iconAlignment = MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER; 
        var objMarker:Marker = new Marker(objLatLng, objMarkerOptions);  

        map.addOverlay(objMarker); 
    }