Google Map in Flex
Google ha recentemente messo a disposizione Google Map per chi sviluppa in flash o flex.
La documentazione la si trova a questo link.
Proviamo ora a creare la prima mappa in Flex.
Prima di tutto richiediamo la chiave per poter utilizzare le mappe sul nostro sito : Sign Up for the Google Maps API
Conserviamo il codice generato che ci servirà in seguito.
Ora recuperiamo da questo link l’sdk per Flex 3.0 (non scaricate Flex Builder 3.0 ma Flex Sdk 3.0). Scompattiamo lo zip in una cartella.
Scarichiamo da questo link l’sdk necessario per visualizzare le mappe Google in flex. Una volta scaricato copiamo il file map_flex_1_3.swc presente nella cartella lib nella cartella frameworks\libs presente nell’ sdk di Flex.
Il nostro ambiente di sviluppo Flex è ora pronto.
Ora creiamo con un editor di testo un file che chiamiamo mappa.mxml.
Scriviamo nel file le seguenti righe di codice:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:Panel title="Flex e Google Map - Doppio click sulla mappa per visualizzare le coordinate" width="100%" height="100%">
<mx:UIComponent id="mapContainer"
initialize="startMap(event);"
resize="resizeMap(event)"
width="100%" height="100%"/>
</mx:Panel>
<mx:Script>
<![CDATA[
import flash.events.Event;
import com.google.maps.MapEvent;
import com.google.maps.MapMouseEvent;
import com.google.maps.Map;
import com.google.maps.MapType;
import com.google.maps.LatLng;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.InfoWindowOptions;
private var map:Map;
public function startMap(event:Event):void {
map = new Map();
map.addEventListener(MapEvent.MAP_READY, onMapReady);
map.addEventListener(MapMouseEvent.DOUBLE_CLICK, onMapClick);
mapContainer.addChild(map);
}
public function resizeMap(event:Event):void {
map.setSize(new Point(mapContainer.width, mapContainer.height));
}
private function onMapReady(event:MapEvent):void {
map.setCenter(new LatLng(41.86956082699455, 12.32666015625), 6, MapType.NORMAL_MAP_TYPE);
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
}
private function onMapClick(event:MapMouseEvent):void {
var s:String;
s = event.latLng.toString();
map.openInfoWindow
( event.latLng,new InfoWindowOptions({title: "Coordinate:", content: s})
);
}
]]>
</mx:Script>
</mx:Application>Il codice crea una mappa centrata sull’Italia.
All’evento doppio click sulla mappa viene vengono visualizzate le coordinate.
Ora dobbiamo compilare il codice per ottenere il file swf.
Per compilarlo usiamo l’eseguibile presente nella cartella bin dell’sdk mxmlc.exe.
Da riga di comando eseguiamo il file mxmlc e come parametro il percorso del file mappa.mxml.
Se tutto è andato bene dovremmo trovare nella cartella il file mappa.swf.
A questo punto non ci rimane che integrare il nostro oggetto in una pagina HTML.
All’oggetto verrà passato come parametro keyla chiave generata per l’utilizzo della mappe di Google sul nostro sito.
Creiamo un file mappaflex.html con il seguente codice stando attenti di sostituire al valore della chiave con il valore della nostra restituito durante la registrazione per l’uso di Google Map
<html>
<head>
<title></title>
<style>
body { margin: 0px; overflow:hidden }
</style>
<script language="JavaScript" type="text/javascript">
</script>
</head>
<body >
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" style="height: 546px; width: 820px" >
<PARAM NAME=movie VALUE="mappa.swf">
<PARAM NAME=quality VALUE=high>
<param name="flashVars" value="key=VALORE DELLA CHIAVE GOOGLE MAP">
<EMBED src="mappa.swf" quality=high width=100 HEIGHT=150
type="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash"></EMBED>
</OBJECT>
</body>
</html>Se tutto è andato bene dovrebbe apparire così: link
Tags: flash, flex, Google Map