Flash and Google Maps - Only Last Icon showing
- by Peter
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);
}
}
}
