Monday, 6 June 2011

Google 3D Map Integration With Flex

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication title="Maps in AIR"
                        xmlns:mx="http://www.adobe.com/2006/mxml"
                        xmlns:maps="com.google.maps.*">
   
            <maps:Map3D id="google3DMap" sensor="false" url="http://code.google.com/apis/maps/signup.html"
                        key="ABQIAAAAs-0bLgXGuavRy_gQNSGJ1BT6Hom2p--h8nhr1SBOg1Sl0RXcDRRoQ1EMK1YqY16X8sCESwaDT6io9Q-HiJkLmNoP"
                        mapevent_mappreinitialize="onMapPreinitialize(event)" mapevent_mapready="on3DMapReady()" width="100%" height="100%"/>
   
    <mx:XML id="locations" source="coordinates.xml"/>
       
    <mx: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.MapOptions;
            import com.google.maps.MapType;
            import com.google.maps.View;
            import com.google.maps.controls.MapTypeControl;
            import com.google.maps.controls.NavigationControl;
            import com.google.maps.geom.Attitude;
            import com.google.maps.overlays.Marker;
            import com.google.maps.overlays.Polyline;
            import com.google.maps.services.ClientGeocoder;
            import com.google.maps.services.GeocodingEvent;
            import com.google.maps.services.GeocodingResponse;
            import com.google.maps.services.Placemark;
           
            import mx.controls.Alert;
           
            private var markerObject:Object = new Object();
            private var geocoder:ClientGeocoder;
           
            private function on3DMapReady():void
            {
                this.google3DMap.enableScrollWheelZoom();
                this.google3DMap.setZoom(6.8);
                this.google3DMap.addControl(new MapTypeControl());
                this.google3DMap.addControl(new NavigationControl());
               
                this.geocoder = new ClientGeocoder();
                this.geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, geocoderSuccess);
                this.geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, geocoderFailure);
               
                this.geocoder.geocode("Maryland");
                plotMarkers();
            }
           
            private function geocoderSuccess(event:GeocodingEvent):void
            {
                var placemark:Placemark = GeocodingResponse(event.response).placemarks[0];
               
                this.google3DMap.panTo(placemark.point);
            }
           
            private function geocoderFailure(event:GeocodingEvent):void
            {
                Alert.show("Unable to Load map");
            }
           
            private function plotMarkers():void
            {
                for (var i:uint; i < locations.row.length(); i++)
                {
                    getMarker(locations.row[i]);
                }
            }
           
            private function getMarker(object:Object):void
            {
                var latLng:LatLng = new LatLng(Number(object.r_latitude), Number(object.r_longitude));
                var marker:Marker = new Marker(latLng);
               
                marker.addEventListener(MapMouseEvent.CLICK, markerClicked);

                this.google3DMap.addOverlay(marker);
            }
           
            private function markerClicked(event:MapMouseEvent):void
            {
                var marker:Marker = event.target as Marker;
                var infoWindow:InfoWindowOptions = new InfoWindowOptions();
               
                infoWindow.content = "This is the selected location.";
               
                infoWindow.pointOffset = new Point(0, -33)
               
                this.google3DMap.openInfoWindow(marker.getLatLng(), infoWindow);
            }
           
            private function onMapPreinitialize(event:MapEvent):void
            {
                var myMapOptions:MapOptions = new MapOptions();
               
                myMapOptions.zoom = 12;
                myMapOptions.center = new LatLng((40.665226,-73.984659), 14)
                myMapOptions.mapType = MapType.HYBRID_MAP_TYPE;
                myMapOptions.viewMode = View.VIEWMODE_PERSPECTIVE;
                myMapOptions.attitude = new Attitude(20,30,0);
               
                this.google3DMap.setInitOptions(myMapOptions);
            }
        ]]>
    </mx:Script>
   
</mx:WindowedApplication>

No comments:

Post a Comment