load marker data to Google Flash Maps MXML Custom InfoWindow

I tried to adopt this recipe by shane doolan see below(source: http://cookbooks.adobe.com/post_Google_Maps_Custom_Info_Window-17492.html). I could pull data from mysql with php (like so http://code.google.com/apis/maps/articles/phpsqlflex.html) 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!

Here's the mxml application:

<fx:Declarations>
    <local:GoogleMapsInfoWindow id="infoWindow"/>
</fx:Declarations>

<fx:Script>
    <![CDATA[
        import com.google.maps.InfoWindowOptions;
        import com.google.maps.LatLng;
        import com.google.maps.MapEvent;
        import com.google.maps.MapMouseEvent;
        import com.googl开发者_JS百科e.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");
        }
    ]]>
</fx:Script>

<maps:Map height="100%"
          id="googleMap"
          width="100%"
          sensor="false"
          key="{API_KEY}"
          url="{API_HOST}"
          mapevent_mapready="googleMap_mapevent_mapreadyHandler(event)"/>

Google Info Window component mxml file:

<s:Label text="Your info window"
         fontSize="20"
         fontWeight="bold"
         textAlign="center"/>

<mx:DataGrid height="100%"
             width="100%">
    <mx:columns>
        <mx:DataGridColumn headerText="some"/>
        <mx:DataGridColumn headerText="info"/>
        <mx:DataGridColumn headerText="here"/>
    </mx:columns>
</mx:DataGrid>

---

Glad to see someone found my post on adobe cookbooks useful, and you are not the first to have had trouble getting data from the app into the info window. Time to update the article I think.

Anyway to anser your question, the GoogleMapsInfoWindow component is defined by you, so it can easily be modified to have variables to store the data you want it to display.

In the above example, you could add an array collection as a public bindable variable and bind that collection to the data grid. Then when creating the info window in 'onMarkerClick' you set the collection (and any other variables you need) beneath the '// update any data displayed in info window if needed' comment.

Updated Google Info Window component mxml file:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Declarations>
        <s:ArrayCollection id="dataProvider"/>
        <!-- other variables go here -->
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:Label text="Your info window"
             fontSize="20"
             fontWeight="bold"
             textAlign="center"/>

    <mx:DataGrid height="100%"
                 width="100%" dataProvider="{dataProvider}">
        <mx:columns>
            <mx:DataGridColumn headerText="ID" dataField="id"/>
            <mx:DataGridColumn headerText="Name" dataField="name"/>
            <mx:DataGridColumn headerText="Description" dataField="desc"/>
        </mx:columns>
    </mx:DataGrid>

</s:Group>

Updated onMarkerClick function:

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
    infoWindow.dataProvider = new Arraycollection( [ {id:1, name:"one", desc: "test one"}, {id:2, name:"two", desc: "test two"}] );

    // eg/ inforWindow.title = "title goes here";
    // eg/ inforWindow.imageURL = "http://url.com/to/some/image.jpg";

    // display info window
    marker.openInfoWindow(new InfoWindowOptions({width: infoWindow.width, height: infoWindow.height, drawDefaultFrame: true, customContent: infoWindow}));
}

---

You can use mx.core.FlexGlobals.