<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="<a href="http://www.adobe.com/2006/mxml">http://www.adobe.com/2006/mxml</a>" layout="absolute" xmlns:ns1="com.google.maps.*">

 <mx:Script>
  <![CDATA[
   import com.google.maps.MapType;
   import com.google.maps.InfoWindowOptions;
   import com.google.maps.overlays.Marker;
   import com.google.maps.styles.FillStyle;
   import com.google.maps.overlays.MarkerOptions;
   import com.google.maps.MapMouseEvent;
   import com.google.maps.controls.ZoomControl;
   import com.google.maps.LatLng;
   import com.google.maps.MapEvent;
   import mx.controls.Alert;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.events.ResultEvent;
   import com.google.maps.Map;
  
   private var map:Map;
   private var xmlPredios:XML;
   
   private var categorias:Object =
   {  "Restaurante": {
     "color": 0xFF0000,
     "markers": []},
    "Posto de Gasolina": {
     "color": 0x0000FF,
     "markers": []},
    "Banco": {
     "color": 0x00FF00,
     "markers": []}
   };

   
   public function onCanvasMapInitialize(event:Event):void {
          map = new Map();
          map.percentHeight = 100;
          map.percentWidth = 100;
          map.key = "xxxxxxxxxxxxxx";
          map.addEventListener(MapEvent.MAP_READY, onMapReady);
          cvsMapa.addChild(map);
   }
   
   private function onMapReady(event:Event):void {
          map.enableScrollWheelZoom();
          map.enableContinuousZoom();
          map.setCenter(new LatLng(-23.516066, -46.643229), 12,MapType.NORMAL_MAP_TYPE);
          map.addControl(new ZoomControl());
         
          carregarXml();
   }
   
   private function carregarXml():void {
    var xmlString:URLRequest = new URLRequest("xml_clientes.xml");
       var xmlLoader:URLLoader = new URLLoader(xmlString);
          xmlLoader.addEventListener("complete", consumirXml);

   }

   public function consumirXml(event:Event):void {
    var xmlAgencias:XML = new XML(event.target.data);
          var markers:XMLList = xmlAgencias.Cliente;
          var markersCount:int = markers.length();
         
          for (var i:Number = 0; i < markersCount; i++) {
              var marker:XML = markers[i];
              var name:String = <a href="mailto:marker.@nome">marker.@nome</a>;
              var type:String = <a href="mailto:marker.@tipo">marker.@tipo</a>;
              var latlng:LatLng = new LatLng(<a href="mailto:marker.@lat">marker.@lat</a>, <a href="mailto:marker.@lon">marker.@lon</a>);
              createMarker(latlng, name, type);
          }
      }
  
   public function createMarker(latlng:LatLng, name:String, type:String):void {
    var markerOptions:MarkerOptions = new MarkerOptions({});
    var fillStyle:FillStyle = new FillStyle({color: categorias[type].color});
    markerOptions.fillStyle = fillStyle;
       
    var marker:Marker = new Marker(latlng, markerOptions);
    var html:String = "<b>" + name + "</b>";
    marker.addEventListener(MapMouseEvent.CLICK, function(e:MapMouseEvent):void {
     marker.openInfoWindow(new InfoWindowOptions({contentHTML:html}));
    });
    categorias[type].markers.push(marker);
    map.addOverlay(marker);
   }

   private function toggleCategory(type:String):void {
    for (var i:Number = 0; i < categorias[type].markers.length; i++) {
     var marker:Marker = categorias[type].markers[i];
     if (!marker.visible) {
      marker.visible = true;
     } else {
      marker.visible = false;
     }
    }
   }
   
   
  ]]>
 </mx:Script>
 
 <mx:Button x="10" y="10" label="Restaurantes" toggle="true" selected="true" click="toggleCategory('Restaurante')"/>
 <mx:Button x="121" y="10" label="Postos de Gasolina" toggle="true" selected="true" click="toggleCategory('Posto de Gasolina')"/>
 <mx:Button x="262" y="10" label="Bancos" toggle="true" selected="true" click="toggleCategory('Banco')"/>
 
 <mx:Canvas id="cvsMapa" initialize="onCanvasMapInitialize(event)" bottom="10" top="40" left="10" right="10">
 
 </mx:Canvas>
 
</mx:Application>