Google Maps Custom Info Window

If you haven't already, add the Google Maps API to your libs folder of you project. Visit the home of the Flash Google Maps api to download the api and apply for your API key.

Basically we will build an info window component, add a marker and then raise our custom info window when a marker is clicked. See more detailed steps below;

1. Add the maps component to your application (See <maps:Map> component)

2. Create an event listener for the google maps 'mapready' event (See <maps:Map mapevent_mapready=...) 

3. In the 'mapready' handler, init the map and add the marker. (See googleMap_mapevent_mapreadyHandler)

4. Create a new component designed as you would like to see the marker info window (see GoogleInfoWindow mxml file)

5. Add an event listener for the click event to each new marker as it is created. This will be used to raise the info window. (See addMarker)

6. In the marker click event handler, open the info window. (See onMarkerClick)

Application mxml file:

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

    <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.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");
            }
        ]]>
    </fx:Script>

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

</s:Application>

Google Info Window component mxml file:

<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          xmlns:s="library://ns.adobe.com/flex/spark"
          height="120"
          width="300"
          horizontalAlign="center"
          paddingBottom="5"
          paddingLeft="5"
          paddingRight="5"
          paddingTop="5"
          verticalAlign="middle">

    <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>

</s:VGroup>

Obviously I have not even scratched the surface of what you can put inside the info window.

For example - Add buttons to delete the marker or find the nearest pub, images of nearby locations, integrate a streetview html component, edit information about the related marker, etc etc.

I leave that up to you!