title: load marker data to Google Flash Maps MXML Custom InfoWindow
body: <p>I tried to adopt this recipe by shane doolan see below(source: <a href="http://cookbooks.adobe.com/post_Google_Maps_Custom_Info_Window-17492.html" rel="nofollow">http://cookbooks.adobe.com/post_Google_Maps_Custom_Info_Window-17492.html</a>).  I could pull data from mysql with php (like so <a href="http://code.google.com/apis/maps/articles/phpsqlflex.html" rel="nofollow">http://code.google.com/apis/maps/articles/phpsqlflex.html</a>) and overlay on the map however I couldn't get the data load too the mxml custom infowindow when clicking on markers. Please help. Thanks!</p>
  
  <p>Here's the mxml application:</p>
  
  <p>
  </p>
  
  <pre><code>&lt;fx:Declarations&gt;
      &lt;local:GoogleMapsInfoWindow id="infoWindow"/&gt;
  &lt;/fx:Declarations&gt;
  
  &lt;fx:Script&gt;
      &lt;![CDATA[
          import com.google.maps.InfoWindowOptions;
          import com.google.maps.LatLng;
          import com.google.maps.MapEvent;
          import com.google.maps.MapMouseEvent;
          import com.google.maps.MapType;
          import com.google.maps.controls.MapTypeControl;
          import com.google.maps.controls.ZoomControl;
          import com.google.maps.overlays.Marker;
          import com.google.maps.overlays.MarkerOptions;
          import com.google.maps.styles.FillStyle;
  
          [Bindable]
          public static var API_HOST:String = "http://YOUR_DOMAIN";
  
          [Bindable]
          public static var API_KEY:String = "YOUR_KEY_GOES_HERE";
  
          public static var DEFAULT_MAP_CENTER:LatLng = new LatLng(-37.814251, 144.963169);
  
          public function onMarkerClick(event:MapMouseEvent):void
          {
              // fetch clicked marker
              var marker:Marker = event.target as Marker;
  
              // update any data displayed in info window if needed
  
              // display info window
              marker.openInfoWindow(new InfoWindowOptions({width: infoWindow.width, height: infoWindow.height, drawDefaultFrame: true, customContent: infoWindow}));
          }
  
          protected function addMarker(latlng:LatLng, label:String = "", tooltip:String = ""):void
          {
              // prepare marker options
              var opts:MarkerOptions = new MarkerOptions();
              opts.fillStyle = new FillStyle({color: 0x00ff00, alpha: .7});
              opts.hasShadow = true;
              opts.label = label;
              opts.tooltip = tooltip;
  
              // build marker
              var marker:Marker = new Marker(latlng, opts);
  
              // add marker event listeners
              marker.addEventListener(MapMouseEvent.CLICK, onMarkerClick);
  
              // add marker to map
              googleMap.addOverlay(marker);
          }
  
          protected function googleMap_mapevent_mapreadyHandler(event:MapEvent):void
          {
              // init map
              googleMap.addControl(new ZoomControl());
              googleMap.addControl(new MapTypeControl());
              googleMap.setCenter(DEFAULT_MAP_CENTER, 14, MapType.NORMAL_MAP_TYPE);
              googleMap.enableScrollWheelZoom();
  
              // add marker to map
              addMarker(DEFAULT_MAP_CENTER, "M", "Best City Ever");
          }
      ]]&gt;
  &lt;/fx:Script&gt;
  
  &lt;maps:Map height="100%"
            id="googleMap"
            width="100%"
            sensor="false"
            key="{API_KEY}"
            url="{API_HOST}"
            mapevent_mapready="googleMap_mapevent_mapreadyHandler(event)"/&gt;
  </code></pre>
  
  <p></p>
  
  <p>Google Info Window component mxml file: </p>
  
  <p>
  </p>
  
  <pre><code>&lt;s:Label text="Your info window"
           fontSize="20"
           fontWeight="bold"
           textAlign="center"/&gt;
  
  &lt;mx:DataGrid height="100%"
               width="100%"&gt;
      &lt;mx:columns&gt;
          &lt;mx:DataGridColumn headerText="some"/&gt;
          &lt;mx:DataGridColumn headerText="info"/&gt;
          &lt;mx:DataGridColumn headerText="here"/&gt;
      &lt;/mx:columns&gt;
  &lt;/mx:DataGrid&gt;
  </code></pre>
  
  <p></p>