Using Google Maps in a Flex / Flex + Google Map

Google Map API is available in For various Languages say for java script, Action Script

before we get started download Google API for Flex

Download Google API HERE : Download

Get Google Map API Key

Get the Google Maps ActionScript 3.0 component.

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute" width="100%" height="100%"

viewSourceURL="srcview/index.html">

<mx:Panel title="Google Maps Flash API Marker Creator Demo"

 backgroundColor="#FFFFFF" width="100%" height="100%"

 creationComplete="init();">

</mx:Panel>

<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 = "ABQIAAAAvZMU4-DFRYtw1UlTj_zc6hT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQcT1h-VA8wQL5JBdsM5JWeJpukvw";

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="India,pune" />

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

How to use Item Renderer in Flex

Item Renderer Is a greate feature provided by Flex. Using Item-Renderer you can Display Data In required manner. item-Renderer basically used with List Base Controls .i.e Data Grid, Combobox etc.

In addition to controlling the display of data using an item renderer, the DataGrid, List, and Tree controls let users edit the data. For example, you could let users update the Quantity column of a DataGrid control

In our Example we will see how to use renderers with

1)Use Item Renderer with Combobox.

2)use Item Renderer with DataGrid.

Like This You can also use it with different controls.

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 

  xmlns:s="library://ns.adobe.com/flex/spark" 

  xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" viewSourceURL="srcview/index.html">

<fx:Declarations>

<!-- Place non-visual elements (e.g., services, value objects) here -->

</fx:Declarations>

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection; 

[Bindable]public var _data:ArrayCollection = new ArrayCollection([{name:"Rabit",file:"a.gif"},

{name:"Bird",file:"b.gif"},{name:"Dyno",file:"c.jpg"},{name:"Fire",file:"d.jpg"}]);

]]>

</fx:Script>

<mx:VBox width="100%" height="100%">

<mx:DataGrid dataProvider="{_data}" width="100%" height="50%">

<mx:columns>

<mx:DataGridColumn dataField="name" headerText="File Name"/>

<mx:DataGridColumn dataField="File">

<mx:itemRenderer>

<fx:Component>

<mx:Image width="100" height="100" source="{data.file}"/>

</fx:Component>

</mx:itemRenderer>

</mx:DataGridColumn>

</mx:columns>

</mx:DataGrid>

<mx:ComboBox dataProvider="{_data}" text="">

<mx:itemRenderer>

<fx:Component>

<mx:Image width="100" height="100" source="{data.file}"/>

</fx:Component>

</mx:itemRenderer>

</mx:ComboBox>

</mx:VBox>

</s:Application>

How to Export into PDF/ / Flex + PDF / Generate PDF From Flex

To generate PDF files from Flex all you need is some external liberies like AlivePDF.swc or generatePdf.swc.
Im my Example i use Alive PDF as its Free and easy to use.
Get AlivePDF.swc
use following save structure to add images or Ui Container to add in PDF file
Get AlivePDF Here : AlivePDF
protected function savePDF():void
{
var myPDFEncoder:PDF = new PDF (Orientation.LANDSCAPE, Unit.MM);
myPDFEncoder.setDisplayMode(Display.FULL_PAGE);
myPDFEncoder.addPage();
myPDFEncoder.addImage(ChartDetails,null,0,0,myPDFEncoder.getMargins().width,myPDFEncoder.getMargins().height);

var bytes:ByteArray = myPDFEncoder.save(Method.LOCAL);
var fx:FileReference = new FileReference();
fx.save(bytes,"ABC.pdf");
}