GoogleMap for Flah（全国萌え系ショップ検索）

簡単にサンプルを作ってみました。
http://moeten.info/flex/20080517_googleMap3/bin-release/main.html

ソースはこちら
ちょいと急ぎで作ったので不具合とかあったらごめんです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" creationComplete="init()"
     horizontalScrollPolicy="off" verticalScrollPolicy="off"
    backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #84BBB1]" xmlns:maps="com.google.maps.*" viewSourceURL="srcview/index.html" width="1024" height="768">
<mx:Script>
<![CDATA[
import mx.collections.ICollectionView;
import mx.events.ListEvent;
import flash.events.Event;
import com.google.maps.InfoWindowOptions;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Marker;
import com.google.maps.styles.FillStyle;
import com.google.maps.overlays.Polygon;
import com.google.maps.overlays.PolylineOptions;
import com.google.maps.styles.StrokeStyle;
import com.google.maps.overlays.PolygonOptions;
import com.google.maps.overlays.Polyline;
import com.google.maps.interfaces.IPolyline;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.MapEvent;
import com.google.maps.Map;
import com.google.maps.MapType;
import com.google.maps.LatLng;
import com.google.maps.MapEvent;
import com.google.maps.MapMouseEvent;
private var map:Map;
public function startMap(event:Event):void {
    map = new Map();
    //キーの設定（デバッグの場合は適当でＯＫっぽい
    map.key = "ABQIAAAAq9Z1Z3_S-AQpWPqQe5Gh1RTPUbbrYNvvx2NyZKWLZIxLFZ0PWBQUBVULqB2RtuXm0IEyFZ0XOsdQrw";
    map.addEventListener( MapEvent.MAP_READY, onMapReady );
    mapContainer.addChild(map);
}
private function init():void{
    shopTreeService.send();
    myProgress.visible = true;
}
public function resizeMap(event:Event):void{
    map.setSize(new Point(mapContainer.width, mapContainer.height));
}
private function onMapReady(event:MapEvent):void {
    myLog.text = "" + map.getZoom();
    //装飾追加
    var zoomControl:ZoomControl = new ZoomControl();
    map.addControl(zoomControl);
    zoomControl.x = 237;
    var pos:PositionControl = new PositionControl();
    map.addControl(pos);
    pos.x = 220;
    map.enableContinuousZoom();
    map.setCenter(new LatLng(35.68627 ,139.69487), 14, MapType.NORMAL_MAP_TYPE);
//    map.addEventListener(MouseEvent.CLICK , setCenter );
    //とりあえずマップの中心をゲット
    var latlng:LatLng = map.getCenter();
    //ラインを引く
    var polyline:Polyline = new Polyline([ new LatLng( latlng.lat() ,latlng.lng() ) , new LatLng( latlng.lat() + 0.01 , latlng.lng() + 0.01 )],
                                            new PolylineOptions({ strokeStyle: new StrokeStyle({ color: 0xFF0000, thickness: 4, alpha: 0.7}     ) }));
    map.addOverlay( polyline );
    //四角形
    var lat:Number = latlng.lat();
    var lon:Number = latlng.lng();
    var latOffset:Number = 0.01;
    var lonOffset:Number = 0.01;
    var polygon:Polygon = new Polygon([ new LatLng(lat, lon - lonOffset),
                                         new LatLng(lat + latOffset, lon),
                                         new LatLng(lat, lon + lonOffset),
                                         new LatLng(lat - latOffset, lon),
                                         new LatLng(lat, lon - lonOffset)
                                        ],
                                        new PolygonOptions({
                                            strokeStyle: new StrokeStyle({ color: 0x0000ff, thickness: 4, alpha: 0.7}),
                                            fillStyle: new FillStyle({ color: 0x0000ff, alpha: 0.7})
                                            })
                                        );
    map.addOverlay(polygon);
//    setMarker();
}
private function setMarker():void {
    var marker:Marker = new Marker( map.getCenter() , new MarkerOptions({ draggable: true } ) );
    map.addOverlay(marker);
    marker.addEventListener(MapMouseEvent.DRAG_START , function():void{
        marker.openInfoWindow(new InfoWindowOptions({content:"Just bouncing along..."}));
    });
    marker.addEventListener(MapMouseEvent.DRAG_END , function():void{
        map.closeInfoWindow();
    });
}
private function setCenter(e:MouseEvent):void{
    var mousePoint:Point = new Point(map.mouseX, map.mouseY);
//    var mousePointLocal:Point = globalToLocal(mousePoint);
    var mouseLatLng:LatLng = map.fromViewPortPointToLatLng(mousePoint);
    var marker:Marker = new Marker( mouseLatLng , new MarkerOptions({ draggable: true } ) );
    map.addOverlay(marker);
}
public function treeChanged(event:Event):void {
    shopSearch.send({
        "tid":Tree(event.target).selectedItem.@tid,
        "cid":Tree(event.target).selectedItem.@cid,
        "sid":Tree(event.target).selectedItem.@sid
    });
    myProgress.visible = true;
    shopData.visible = false;
}
private function tree_itemClick(evt:ListEvent):void {
    var item:Object = Tree(evt.currentTarget).selectedItem;
    if ( shopTree.dataDescriptor.isBranch(item)) {
        shopTree.expandItem( item , !shopTree.isItemOpen(item), true);
    }
}
private function tree_labelFunc(item:XML):String {
    var children:ICollectionView;
    var suffix:String = "";
    if (shopTree.dataDescriptor.isBranch(item)) {
        children = shopTree.dataDescriptor.getChildren(item);
        suffix = " (" + children.length + ")";
    }
    return item[shopTree.labelField] + suffix;
}
private function onResult(e:Event):void{
    //マーカーの作成
//    try{
//        map.clearOverlays();
//    }catch( e:Event ){
//    }
    for( var cnt:int = 0 ; cnt < markerArr.length ; cnt ++ ){
        map.removeOverlay(markerArr[cnt] );
    }
    for( var i:int = 0 ; i < shopSearch.lastResult.item.length() ; i ++ ){
        myLog.text += "" + shopSearch.lastResult.item[i].shopname;
        makeMarker(
            i,
            shopSearch.lastResult.item[i].sid,
            shopSearch.lastResult.item[i].shopname,
            shopSearch.lastResult.item[i].wgps_lat,
            shopSearch.lastResult.item[i].wgps_lon
        );
    }
    shopData.visible = true;
    var latlng:LatLng = new LatLng(shopSearch.lastResult.item[0].wgps_lat,shopSearch.lastResult.item[0].wgps_lon);
    map.setCenter( latlng );
    myProgress.visible = false;
}
private var markerArr:Array = new Array();
private function makeMarker(num:int , sid:int , name:String , wgps_lat:Number , wgps_lon:Number ):void{
    var marker:Marker = new Marker( new LatLng( wgps_lat , wgps_lon ) , new MarkerOptions({ draggable: false } ) );
    map.addOverlay(marker);
    markerArr[num] = marker;
    marker.addEventListener(MapMouseEvent.ROLL_OVER , function():void{
        marker.openInfoWindow(new InfoWindowOptions({content:name}));
    });
    marker.addEventListener(MapMouseEvent.ROLL_OUT , function():void{
        marker.closeInfoWindow();
    });
    marker.addEventListener(MapMouseEvent.CLICK , function():void{
        shopData.selectedIndex = num;
        shopHideShow.play();
    });
}
private function onItemClick():void{
    var i:int = shopData.selectedIndex;
    var latlng:LatLng = new LatLng(shopSearch.lastResult.item[i].wgps_lat,shopSearch.lastResult.item[i].wgps_lon);
    map.setCenter( latlng );
    markerArr[i].openInfoWindow(new InfoWindowOptions({content:"" +shopSearch.lastResult.item[i].shopname}));
    shopHideShow.play();
}
import mx.effects.easing.*;
]]>
</mx:Script>
<!--#################  #################-->
<mx:HTTPService id="shopTreeService" url="http://moeten.info/maidcafe/?m=flex&amp;type=shoplist" result="{shopTree.visible = true;    myProgress.visible = false;}"
    useProxy="false" resultFormat="e4x" showBusyCursor="true" />
<mx:HTTPService id="shopSearch" url="http://moeten.info/maidcafe/?type=shop&amp;m=api"
    method="GET" useProxy="false" resultFormat="e4x" showBusyCursor="true" result="onResult(event)" />
<!--#################  #################-->
<mx:Sequence id="treeShow">
    <mx:Move xFrom="-100" xTo="10" easingFunction="Back.easeOut"/>
</mx:Sequence>
<mx:Sequence id="treeHide">
    <mx:Move xTo="-100" easingFunction="Back.easeIn"/>
</mx:Sequence>
<mx:Sequence id="listShow">
    <mx:Move yFrom="900" yTo="512" easingFunction="Back.easeOut" duration="1000"/>
</mx:Sequence>
<mx:Sequence id="listHide">
    <mx:Move yTo="900" easingFunction="Back.easeIn"/>
</mx:Sequence>
<mx:Sequence id="shopShow">
    <mx:Move yFrom="900" yTo="512" easingFunction="Back.easeOut" duration="1000"/>
</mx:Sequence>
<mx:Sequence id="shopHide">
    <mx:Move yTo="900" easingFunction="Back.easeIn"/>
</mx:Sequence>
<mx:Sequence id="shopHideShow" target="{shopDetail}">
    <mx:Move yFrom="900" yTo="512" easingFunction="Back.easeOut" duration="1000"/>
</mx:Sequence>
<!--#################  #################-->
<mx:UIComponent id="mapContainer" initialize="startMap(event);" resize="resizeMap(event)" width="1032" height="769"  x="0" y="0" alpha="0.8"/>
<mx:Tree id="shopTree" width="204" height="748" visible="false" showEffect="treeShow" hideEffect="treeHide" backgroundColor="0xffccff"
    backgroundAlpha="0.8" fontSize="16" fontWeight="bold"
    showRoot="false"
    labelField="@name"
    labelFunction="tree_labelFunc"
    change="treeChanged(event)"
    itemClick="tree_itemClick(event);"
    dataProvider="{shopTreeService.lastResult.node}" x="10" y="10">
</mx:Tree>
    <!--リスト表示用-->
    <mx:TileList rowHeight="50" width="348" height="246" id="shopData" itemClick="onItemClick()" backgroundColor="0xffccff"
         horizontalScrollPolicy="off" dataProvider="{shopSearch.lastResult.item}" x="222" visible="false"
         showEffect="listShow" hideEffect="listHide" y="512" backgroundAlpha="0.8">
        <mx:itemRenderer>
            <mx:Component>
                <mx:HBox verticalGap="0" horizontalGap="0" verticalAlign="top" verticalScrollPolicy="off" horizontalScrollPolicy="off">
                    <mx:Image source="{data.image.image1}" width="50" height="50" />
                    <mx:VBox verticalGap="0" horizontalGap="0">
                        <mx:Text text="{data.shopname}" width="400" textAlign="left" color="0x0000ff"/>
                        <mx:TextArea  text="{data.setumei}" width="400" editable="false" height="40" verticalScrollPolicy="off" backgroundAlpha="0" textAlign="left" borderStyle="solid" borderThickness="0" />
                    </mx:VBox>
                </mx:HBox>
            </mx:Component>
        </mx:itemRenderer>
    </mx:TileList>
    <!--詳細表示用-->
    <mx:TileList id="shopDetail" selectable="false" width="440" height="248" rowCount="1" columnCount="1" showEffect="shopShow" hideEffect="shopHide" backgroundColor="0xffccff"
         backgroundAlpha="0.8"
        horizontalScrollPolicy="off" dataProvider="{shopData.selectedItem}" x="578" visible="true" y="900">
        <mx:itemRenderer>
            <mx:Component>
                <mx:VBox verticalGap="10" horizontalGap="10" horizontalAlign="center" verticalAlign="top" verticalScrollPolicy="off" horizontalScrollPolicy="off">
                    <mx:Text text="{data.shopname}" width="300" textAlign="left" fontSize="16" color="0x0000ff" />
                    <mx:HBox verticalGap="0" horizontalGap="0" verticalAlign="top">
                        <mx:Image source="{data.image.image1}" height="80" width="80"/>
                        <mx:Image source="{data.image.image2}" height="80" width="80"/>
                        <mx:Image source="{data.image.image3}" height="80" width="80"/>
                    </mx:HBox>
                    <mx:TextArea text="{data.setumei}" width="300" editable="false" height="250"
                        verticalScrollPolicy="off" backgroundAlpha="0" textAlign="left" borderStyle="solid" borderThickness="0" />
                </mx:VBox>
            </mx:Component>
        </mx:itemRenderer>
    </mx:TileList>
    <mx:TextArea id="myLog" x="525" y="768" width="507" height="275" visible="false"/>
    <mx:DataGrid x="10" y="766" width="507" height="246" dataProvider="{shopSearch.lastResult.item}" visible="false">
        <mx:columns>
            <mx:DataGridColumn headerText="列 1" dataField="shopname"/>
            <mx:DataGridColumn headerText="列 1" dataField="sid"/>
            <mx:DataGridColumn headerText="列 1" dataField="wgps_lat"/>
            <mx:DataGridColumn headerText="列 2" dataField="wgps_lon"/>
        </mx:columns>
    </mx:DataGrid>
    <mx:ProgressBar id="myProgress" x="0" y="0" width="1032" indeterminate="true" label=" " visible="false"/>
</mx:Application>