<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    width="100%" height="100%" 
    viewSourceURL="srcview/index.html"
    backgroundColor="#FFFFFF">
  
      <mx:Style>
          Application {
           backgroundColor: #ffffff;
           backgroundGradientColors: #ffffff, #ffffff;
        }
      
          Panel {
           borderThicknessLeft: 0;
           borderThicknessTop: 0;
           borderThicknessBottom: 0;
           borderThicknessRight: 0;
           cornerRadius: 10;
           headerColors: #000000, #999999;
        }
      </mx:Style>
  
    <mx:Script>
        <![CDATA[
            import com.google.maps.interfaces.IMapType;
              import com.google.maps.LatLng;
              import com.google.maps.Map;
              import com.google.maps.MapEvent;
              import com.google.maps.MapType;
         
              private var map:Map;
              
              public function onContinerInitialize( event:Event ):void 
              {
                map = new Map();
                map.key = "put your api key here";
                map.addEventListener( MapEvent.MAP_READY, onMapReady );
                mapContainer.addChild( map );
              }
        
            public function onContainerResize( event:Event ):void 
            {
                map.setSize( new Point( mapContainer.width, mapContainer.height ) );
            }
        
             private function onMapReady( event:Event ):void 
             {
                 mapType.dataProvider = [ MapType.PHYSICAL_MAP_TYPE, MapType.NORMAL_MAP_TYPE, MapType.SATELLITE_MAP_TYPE, MapType.HYBRID_MAP_TYPE ];
                mapType.selectedIndex = 0;
                map.enableScrollWheelZoom();
                map.enableContinuousZoom();
                map.setCenter(new LatLng(38.897318, -77.035392), 10, mapType.dataProvider[0] );
              }
              
              private function onChangeMapType() : void
              {
                  if ( mapType.selectedItem )
                      map.setMapType( IMapType( mapType.selectedItem ) );
              }
              
              private function labelFunction( o : Object ) : String
              {
                  if ( o is IMapType )
                      return IMapType( o ).getName();
                  return "";
              }
        ]]>
    </mx:Script>
          
    <mx:Panel 
          title="Google Maps Sample" 
          top="5" bottom="5" left="5" right="5">
        
        <mx:UIComponent id="mapContainer" 
            initialize="onContinerInitialize(event);" 
            resize="onContainerResize(event)" 
            width="100%" height="100%"/>
          
          <mx:ControlBar>
              
              <mx:Label text="Map Type" />
              <mx:ComboBox id="mapType" 
                  labelField="label" 
                  change="onChangeMapType()" 
                  labelFunction="labelFunction" />
                  
          </mx:ControlBar>
          
    </mx:Panel>
  
</mx:Application>