Re[flexcoders] ndering Google Maps in Flex

[Manu Dhanda]

Hii,

I was just following the example given at Google Maps Flash API to render a
MAP.

Although I can display that MAP if I 'll put that code in my main
<mx:Application />. But if I put that same code in my some other component,
say a panel, it doesn't display anything.

Can someone explain me the reasons and correction to my code.

<mx:Applicaion code is:

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright 2007 Google Inc. -->
<!-- All Rights Reserved. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";  layout="absolute"
width="100%" height="100%">
  <mx:Panel title="Google Maps API for Flash - Simple Map" width="100%"
height="100%">
    <mx:UIComponent id="mapContainer" 
        initialize="startMap(event);" 
        resize="resizeMap(event)" 
        width="100%" height="100%"/>
  </mx:Panel>
  <mx:Script>
    <![CDATA[
import flash.events.Event;
import com.google.maps.MapEvent;
import com.google.maps.Map;
import com.google.maps.MapType;
import com.google.maps.LatLng;

  private var map:Map;

  public function startMap(event:Event):void {
    map = new Map();
    map.key =
"ABQIAAAAongH9f4ZHP4IeJgCw10zYxRB2v-9WbAcHLHG39_-iKQOKR3-FBQvCpW-uuLBEvOa5wZW0dlG0GdBEw";
    map.addEventListener(MapEvent.MAP_READY, onMapReady);
    mapContainer.addChild(map);
  }
      
  public function resizeMap(event:Event):void {
    map.setSize(new Point(mapContainer.width, mapContainer.height));
  }
  
  private function onMapReady(event:Event):void {
    map.setCenter(new LatLng(40.736072,-73.992062), 14,
MapType.NORMAL_MAP_TYPE);
  }
    ]]>
  </mx:Script>
</mx:Application>

And my other component code is:

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml";
        width="100%" height="100%">
        <mx:Script>
                <![CDATA[
                import flash.events.Event;
                import com.google.maps.MapEvent;
                import com.google.maps.Map;
                import com.google.maps.MapType;
                import com.google.maps.LatLng;
                
                private var map:Map;
                
                public function startMap(event:Event):void {
                        map = new Map();
                        map.key =
"ABQIAAAAongH9f4ZHP4IeJgCw10zYxSVtLU3SHysfyQPtFeyjAmupT0j-BQhpynA6DTRLzKcUHMHEsTzg7nZeA";
                        map.addEventListener(MapEvent.MAP_READY, onMapReady);
                        mapContainer.addChild(map);
                }
                  
                public function resizeMap(event:Event):void {
                        map.setSize(new Point(mapContainer.width, 
mapContainer.height));
                }
                  
                private function onMapReady(event:MapEvent):void {
                        map.setCenter(new LatLng(40.736072,-73.992062), 14,
MapType.NORMAL_MAP_TYPE);
                }
                ]]>
        </mx:Script>
    <mx:UIComponent id="mapContainer" 
        initialize="startMap(event);" 
        resize="resizeMap(event)" 
        width="100%" height="100%"/>
        <mx:Button label="Refresh"/>
</mx:Panel>


Anyone with a reason and suggestion??

Thanks,
Manu.
-- 
View this message in context: 
http://www.nabble.com/Rendering-Google-Maps-in-Flex-tp17651222p17651222.html
Sent from the FlexCoders mailing list archive at Nabble.com.