MarkerClusterer with custom icons and data from a XML file.

MarkerClusterer collects markers into different clusters and displays the number of markers in each cluster with a label, creating new clusters as the map zoom level changes.

Let’s say that you retrieve your data from a XML file and you show the markers with “map.addOverlay(marker);”

Now if you want to integrate your application with MarkerClusterer use the following code:


<div id="_mcePaste">[Embed( "images/chart.png" )]
private static const userMapIconClass:Class;</div>


<div id="_mcePaste">public var markerClusterer : MarkerClusterer;</div>


<div id="_mcePaste">...</div>


<div id="_mcePaste">
public function readXml(event:Event):void{

    var markersXML:XML = new XML(;
    var markers:XMLList = markersXML..marker;
    var markersCount:int =  markers.length();
    var i:Number;
    var marker_s:Array = new Array();	

    for (i=0; i &lt; markersCount; i++) {
	var markerXml:XML = markers[i];
	var name:String = markerXml.@name;
	var address:String = markerXml.@address;
	var type:String = markerXml.@type;
	var distance:String = markerXml.@distance;
	var latlng : LatLng = new LatLng(markerXml.@lat, markerXml.@lng);
        var marker:Marker = createMarker(latlng, name, address, type);

        //add custom icons markerOptions
        var icon:DisplayObject = DisplayObject( new userMapIconClass );
        var markerOptions:MarkerOptions = new MarkerOptions( { icon: icon,</div>


<div id="_mcePaste">        iconAlignment: MarkerOptions.ALIGN_HORIZONTAL_CENTER |</div>


<div id="_mcePaste">        MarkerOptions.ALIGN_VERTICAL_CENTER } );
        var marker_ : UnitMarker = new UnitMarker(latlng, markerOptions);

        //add clusters

        //populate the datagrid
        myMarker.addItem({nameInstitute:name, distanceInstitute:distance,</div>


<div id="_mcePaste">        latLntInstitute:latlng });


   //create the object markerClusterer
   markerClusterer = new MarkerClusterer(map, marker_s);


That’s it.