<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="vertical"
  paddingBottom="0"
  paddingLeft="0"
  paddingRight="0"
  paddingTop="0"
  verticalGap="0" 
  viewSourceURL="srcview/index.html">

  <mx:Script>
      <![CDATA[
        import com.google.maps.overlays.Marker;
        import com.google.maps.controls.MapTypeControl;
        import com.google.maps.controls.PositionControl;
        import com.google.maps.controls.ZoomControl;
        import com.google.maps.InfoWindowOptions;
        import com.google.maps.MapMouseEvent;
     
        import com.google.maps.LatLng;
        import com.google.maps.Map;
        import com.google.maps.MapEvent;
        import com.google.maps.MapType;
  
      private var marker : Marker;
  
      private function onMapReady(event:Event):void 
      {
         var centerLL : LatLng = new LatLng(38.900218,-77.036562);
          
         map.setCenter( centerLL, 18, MapType.NORMAL_MAP_TYPE);
         map.addControl(new ZoomControl());
         map.addControl(new PositionControl());
         map.addControl(new MapTypeControl());
         map.addEventListener(MapMouseEvent.CLICK, onMapClick);
         
         marker = new Marker( centerLL );
         map.addOverlay( marker );
       }
      
      private function onMapClick(event:MapMouseEvent):void 
      {
         marker.setLatLng( event.latLng );
         ExternalInterface.call( "setPanorama", event.latLng.lat(), event.latLng.lng() );
       }
      
      ]]>
  </mx:Script>

  <maps:Map 
    xmlns:maps="com.google.maps.*" 
    id="map" 
    mapevent_mapready="onMapReady(event)" 
    width="100%" height="100%" 
    key="api_key_here"
    />
       
  <mx:ApplicationControlBar width="100%" cornerRadius="0">
    
    <mx:Text 
      x="5" y="4" width="100%" height="100%" 
      text="Click anywhere on the map to update the street view." 
      selectable="false"  fontWeight="bold" fontSize="12"/>
    
  </mx:ApplicationControlBar> 
  
</mx:Application>
  

<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=api_key_here" type="text/javascript"></script>
<script type="text/javascript"> 

var myPano;   
var panoClient;
var nextPanoId;


function initialize()
{
   var whiteHouse = new GLatLng(38.900218,-77.036562);
   var whiteHousePOV = {yaw:180,pitch:0};
   
   panoClient = new GStreetviewClient();      
   
   myPano = new GStreetviewPanorama(document.getElementById("pano"));
   myPano.setLocationAndPOV(whiteHouse, whiteHousePOV);
   GEvent.addListener(myPano, "error", handleNoFlash);  
   panoClient.getNearestPanorama(whiteHouse, showPanoData);
}


function showPanoData(panoData) 
{
   if (panoData.code != 200) {
      GLog.write('showPanoData: Server rejected with code: ' + panoData.code);
      return;
    }
   
   myPano.setLocationAndPOV(panoData.location.latlng);
}

function handleNoFlash(errorCode) 
{
   if (errorCode == 603) {
      alert("Error: Flash doesn't appear to be supported by your browser");
      return;
    }
}  

function setPanorama( lat, lon ) 
{
    panoClient.getNearestPanorama(new GLatLng(lat, lon), showPanoData);
}

</script>

<!-- 
And the flex application embed statements would go here
-->

<div id="pano" style="width:100%;height:100%" ></div>