<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

				layout="vertical"

				xmlns:maps="com.google.maps.*" 

				width="100%" 

				height="100%"  backgroundGradientAlphas="[1.0, 1.0]" 

				backgroundGradientColors="[#002856, #7E9FFF]">

<!--	



LOG:



@20100211	Change the interface of MarkerClusterer from using Map, to IPane.



-->

<mx:Script>

<![CDATA[

	import com.google.maps.interfaces.IPane;

	import com.google.maps.extras.markerclusterer.*;

	import com.google.maps.styles.FillStyle;

	import com.google.maps.InfoWindowOptions;

	import com.google.maps.overlays.Marker;

	import com.google.maps.overlays.MarkerOptions;

	import com.google.maps.LatLng;

	import com.google.maps.MapOptions;

	import com.google.maps.MapMoveEvent;

	import com.google.maps.MapMouseEvent;

	import com.google.maps.controls.ZoomControl;

	

	private var markerClusterer : MarkerClusterer;

	private function map_onMapReady() : void {

		var newCenter 	    : LatLng;

		

		var pane:IPane = map.getPaneManager().createPane();

		

		// Will now cluster them

		markerClusterer = new MarkerClusterer(pane, this.createRandomMarkers());

		

		var centerPos : LatLng = new LatLng(0, 0);

		map.setCenter(centerPos, 2);

		map.addControl(new ZoomControl);			

      } 

	private function createRandomMarkers(count:int=500):Array{

      	var marker_s        : Array = new Array();



		// Will draw 500 randomly positioned markers

		for (var i:int = 0; i < count; ++i) {

			var latlng : LatLng = new LatLng((Math.random() * 170) - 85, (Math.random() * 360) - 180);

			var marker_ : UnitMarker 	= new UnitMarker(latlng);

			marker_s.push(marker_);

		}

		return marker_s;

     }

]]>

</mx:Script>

	<mx:Label text="Marker Clustering Demo - For Flex" color="#FFFFFF" fontWeight="bold" fontSize="14" width="100%"/>

	<mx:Box direction="horizontal" >

		<mx:Button label="add random markers" click="this.markerClusterer.addMarkers(createRandomMarkers(200)); markerClusterer.resetViewport(this.cb.selected);" />

		<mx:CheckBox id="cb" label="update map dymantically?" click="markerClusterer.resetViewport(this.cb.selected);" color="0xffffff"/>

		<mx:Button id="btn" label="remove all markers" click="this.markerClusterer.clearMarkers()" />

	</mx:Box>

	<maps:Map id="map" 

			  key="ABQIAAAAwZG5Tk3XmQjBsSYWpMhjDRSdTDYviMONHujlMmN890x_YsxVvRSwiyXiYCZghmG9-BgJSPC0upuacg"

	  		  mapevent_mapready="map_onMapReady()" 

	  		  width="100%" height="100%"

	  		  />

	

</mx:Application>