7 Replies Latest reply on Feb 17, 2009 10:49 AM by Developer504

    Incorporating google maps and /or microsoft Virtual Earth into Flex

    Developer504 Level 1
      I'm wondering if anyone has done this and / or if any components have been made etc.

      We'd like to do dynamic mapping of multiple objects on a map, also use different shapes for the objects depending on the data (basically arrows pointed in different directions).

      Any commentary, ideas, help or advice will be welcome.

      G.
        • 1. Re: Incorporating google maps and /or microsoft Virtual Earth into Flex
          EWN-CMI Level 1
          This is what I use - I have not dug into the api much but good luck. The Google AppID is stored in appid.txt. It is a component so wrap it in an application to test.

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" label="Map" width="100%" height="100%" backgroundColor="#D3CDB4" borderStyle="inset" backgroundAlpha="0.5" borderColor="#030303" creationComplete="init();">

          <mx:Script>
          <![CDATA[
          import com.google.maps.LatLng;
          import com.google.maps.Map;
          import com.google.maps.MapEvent;
          import com.google.maps.controls.MapTypeControl;
          import com.google.maps.controls.PositionControl;
          import com.google.maps.controls.ZoomControl;
          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;
          import mx.events.ResizeEvent;

          private var googleMap:Map;
          private var geocoder:ClientGeocoder;

          private function init():void {
          googleMap = new Map();
          googleMap.key = APP_ID;
          googleMap.addEventListener(MapEvent.MAP_READY, googleMap_mapReady);
          googleMap.setSize(new Point(mapContainer.width, mapContainer.height));
          googleMap.addControl(new ZoomControl());
          googleMap.addControl(new MapTypeControl());

          mapContainer.addChild(googleMap);
          }

          private function geocoder_geocodingSuccess(evt:GeocodingEvent):void {
          var result:Placemark = GeocodingResponse(evt.response).placemarks[0];
          googleMap.setCenter(result.point, 13);
          }

          private function geocoder_geocodingFailure(evt:GeocodingEvent):void {
          Alert.show("Unable to geocode address: " + evt.name);
          }

          private function googleMap_mapReady(evt:MapEvent):void {
          geocoder = new ClientGeocoder();
          geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, geocoder_geocodingSuccess);
          geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, geocoder_geocodingFailure);
          geocoder.geocode(textInput.text);
          }

          private function button_click(evt:MouseEvent):void {
          geocoder.geocode(textInput.text);
          }

          private function mapContainer_resize(evt:ResizeEvent):void {
          if (googleMap) {
          googleMap.setSize(new Point(mapContainer.width, mapContainer.height));
          }
          }
          ]]>
          </mx:Script>

          <mx:String id="APP_ID" source="appid.txt" />

          <mx:ApplicationControlBar dock="true">
          <mx:Form styleName="plain">
          <mx:FormItem label="Address:"
          direction="horizontal">
          <mx:TextInput id="textInput"
          text="ANY ADDRESS, LAS VEGAS, NV 89044" />
          <mx:Button id="button"
          label="Submit"
          click="button_click(event);" />
          </mx:FormItem>
          </mx:Form>
          </mx:ApplicationControlBar>

          <mx:UIComponent id="mapContainer"
          width="100%"
          height="100%"
          resize="mapContainer_resize(event);" />
          <mx:Canvas x="55" y="252" width="200" height="72" backgroundColor="#AEA886" backgroundAlpha="0.5" cornerRadius="20" borderStyle="inset" alpha="0.8">
          <mx:Text x="22" y="10" text="NAME" width="152"/>
          <mx:Text x="22" y="27" text="ADDRESS"/>
          <mx:Text x="22" y="46" text="TIME"/>
          </mx:Canvas>

          </mx:Canvas>
          • 3. Re: Incorporating google maps and /or microsoft Virtual Earth into Flex
            Developer504 Level 1
            I tried this out but it had trouble with these event types:

            private function geocoder_geocodingSuccess(evt:GeocodingEvent):void {
            var result:Placemark = GeocodingResponse(evt.response).placemarks[0];
            googleMap.setCenter(result.point, 13);
            }

            private function geocoder_geocodingFailure(evt:GeocodingEvent):void {
            Alert.show("Unable to geocode address: " + evt.name);
            }

            private function googleMap_mapReady(evt:MapEvent):void {
            geocoder = new ClientGeocoder();
            geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, geocoder_geocodingSuccess);
            geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, geocoder_geocodingFailure);
            geocoder.geocode(textInput.text);
            }
            • 4. Incorporating google maps and /or microsoft Virtual Earth into Flex
              Developer504 Level 1
              EWN-CMI or anyone else around to help me tinker with this a bit more? It seemed like I was missing some kind of component or something

              D.
              • 6. Re: Incorporating google maps and /or microsoft Virtual Earth into Flex
                Developer504 Level 1
                Ok new question, I have this working, my map is displaying wonderfully. Now I want to lay objects over this. Specifically I'm going to need to lay about say, 30 objects on this map, and not only that, I need them to have a specific shape that I can orient in different directions based on some data.

                I know Flash can do stuff like this, but how can you make custom objects in Flash that you can point in different directions like little sprites? I don't even know where to start with that. Could someone point me in a useful direction to get started?

                D.