Implementar un mapa utilizando la API de mapas de Google para Flash

() translation by (you can also view the original English article)

Dos veces al mes, revisamos algunos de los posts favoritos de nuestros lectores a lo largo de la historia de Activetuts+. Este tutorial se publicó por primera vez en mayo de 2009.

En este tutorial veremos cómo podemos crear un mapa en Flash utilizando la API de Google Map. Cubriremos algunos de los aspectos básicos, como el zoom en el mapa y la adición de algunos controles. También veremos cómo podemos añadir marcadores a nuestro mapa y cómo podemos cargar datos utilizando un archivo XML.

Paso 1: La clave API de Google Map

Antes de empezar a crear nuestro mapa en Flash necesitamos configurar algunas cosas. Para utilizar la API de mapas de Google necesitarás una clave de API personal. Para conseguirla, ve a http://code.google.com/intl/nl/apis/maps/documentation/flash/ y haz clic en el enlace de la parte derecha de la página "Sign up for a Google Maps API Key".

Paso 2: Inscríbete

Al hacer clic en el enlace "Registrarse para obtener una clave de API de Google Maps", pasamos a la siguiente página en la que podemos generar nuestra clave de API personal. Desplázate hacia abajo en la página, acepta los términos y condiciones (puedes leerlos también si estás realmente interesado) y añade la url del sitio web donde quieres utilizar la aplicación (necesitarás una API Key diferente para cada dominio donde quieras colocar un mapa). A continuación, haz clic en "Generar clave API".

Paso 3: ¡Guárdalo!

Ahora verás tu API Key personal para el dominio seleccionado. Copia la clave de la API y pégala o guárdala en algún sitio, ya que la necesitaremos muy pronto.

Paso 4: El componente SWC de Google Map

Bien, ahora tenemos nuestra API Key pero todavía necesitamos una cosa más antes de poder empezar a crear nuestro mapa en Flash. Necesitamos descargar el componente SWC de Google Map. Para ello, dirígete a http://code.google.com/intl/nl/apis/maps/documentation/flash/ y haz clic en "Download the Google Maps API for Flash SDK". Aparecerá una ventana emergente, elige Guardar el archivo "sdk.zip" y descárgalo.

Paso 5: Instalar el componente SDK

Ahora tenemos que instalar el componente SDK para utilizarlo en Flash. Para ello, dirígete a la ubicación en la que guardaste la API de Google Maps para el SDK de Flash y busca la versión no flexible de la biblioteca de la interfaz. En mi caso es (lib/map_1_9.swc). Ahora copia el archivo "map_1_9.swc".

Paso 6: Carpetas

Después, si tienes Flash abierto, sal de la aplicación y busca esta carpeta:

(Windows) C:\Archivos de Programa\Adobe\Adobe Flash CS3 (o tu versión de Flash)\en (o tu idioma)\Configuración\Componentes
(Mac OS X) Macintosh HD/Aplicaciones/Adobe Flash CS3 (o tu versión de Flash)/Configuración/Componentes

Dentro de esa carpeta crea una nueva carpeta llamada "google" y pega en ella el archivo "map_1_9.swc". Flash ya está configurado para admitir la API de Google Maps para Flash.

Paso 7: Nuevo archivo ActionScript 3.0

Bien. ¡Ya está todo hecho! Ahora ya podemos empezar a crear nuestro mapa en Flash. Inicia Flash CS3 o CS4 y crea un nuevo archivo ActionScript 3.0, con un tamaño de escenario por defecto (550 x 400).

Paso 8: ¡Guárdalo!

Ahora simplemente guarda el archivo; pulsa "Ctrl+S" o ve a Archivo > Guardar en el menú. Guárdalo en la ubicación que quieras y ponle el nombre que quieras. Lo llamaré "google_map".

Paso 9: La biblioteca de GoogleMaps

Abre el panel de componentes "Ctrl+F7" o haz clic en Ventana > Componentes en el menú y arrastra la GoogleMapsLibrary al escenario.

Paso 10: La capa de acciones

Crea una nueva capa, haz doble clic en su nombre y renómbrala como "acciones".

Paso 11: Importar..

Ahora, con la capa de acciones seleccionada, abre el panel de acciones pulsando "F9" o haciendo clic en Ventana > Acciones. Puedes añadir estas líneas de código:

1	import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapType;
2

Paso 12: Crear el mapa

¡Ahora puedes añadir el mapa! Cuando carguemos la película, este trozo de código creará un mapa y lo colocará en el escenario. Dentro del código vemos la variable "map.key"; aquí podemos añadir nuestra API Key personal. Abre el archivo donde guardaste la clave de la API y cópiala/pégala en la variable.

1	// Create The Map var map:Map = new Map(); map.key = "Your API Key here"; map.setSize(new Point(stage.stageWidth, stage.stageHeight)); this.addChild(map);
2

Paso 13: Prueba de la película

Bien, ahora ve a probar tu película "Ctrl+Enter" o haz clic en Control > Probar película en el menú y verás que acabas de crear un mapa.

Paso 14: Controles

En este momento solo podemos arrastrar el mapa. Eso no es realmente lo que buscamos, así que podemos añadir algunos controles al mapa que nos permitirán hacer zoom y desplazarnos. Para poder añadir controles a nuestro mapa tenemos que actualizar nuestro código. Primero tenemos que llamar a algunas clases adicionales:

1	import com.google.maps.controls.ZoomControl; import com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl;
2

Después tenemos que crear una nueva función para llamar una vez que el mapa se crea. Llamamos a esa función "onMapReady()". Dentro de esta función puedes añadir nuestros controles al mapa.

1	function onMapReady(event:MapEvent):void { map.addControl(new ZoomControl()); map.addControl(new PositionControl()); map.addControl(new MapTypeControl()); }
2

Ahora solo tenemos que llamar a la función "onMapReady()" cada vez que se cargue nuestro mapa. Para ello puedes añadir una línea adicional a nuestro primer fragmento de código.

1	map.addEventListener(MapEvent.MAP_READY, onMapReady);
2

Nuestro código completo tiene ahora este aspecto:

    import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapType; import com.google.maps.controls.ZoomControl; import com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl; // Create The Map var map:Map = new Map(); map.key = "Your API Key Here"; map.setSize(new Point(stage.stageWidth, stage.stageHeight)); map.addEventListener(MapEvent.MAP_READY, onMapReady); this.addChild(map); function onMapReady(event:MapEvent):void { map.addControl(new ZoomControl()); map.addControl(new PositionControl()); map.addControl(new MapTypeControl()); }

Paso 15: Más..

Ahora prueba tu película "Ctrl+Enter" o haz clic en Control > Probar Película en el menú y verás que nuestro mapa ahora tiene controles. Podemos hacer zoom e incluso cambiar nuestro mapa a la vista Satélite, Híbrida y Terreno. Eso está muy bien pero queremos más..

Paso 16: Latitud y Longitud

Hagamos zoom en una ubicación específica una vez que nuestro mapa se cargue por primera vez. Digamos que soy un surfista y quiero crear un mapa de los puntos de surf de mi ciudad. No queremos que la gente tenga que acercarse manualmente y buscar la zona, así que lo arreglaremos en un segundo. Lo único que podemos añadir es una pequeña línea de código a nuestra función "onMapReady()".

1	map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);
2

Lo que realmente hacemos aquí es crear un nuevo punto LatLng en el mapa. Primero especificamos 2 valores: la "latitud" y la "longitud" de nuestra región. A continuación, establecemos nuestro valor de zoom; yo he optado por utilizar el 9. El zoom va de 0 a 16 aproximadamente (puede variar de una región a otra). Por último, establecemos el tipo de mapa; aquí he optado por el HYBRID_MAP_TYPE.

Nuestra función "onMapReady()" tiene ahora este aspecto:

    function onMapReady(event:MapEvent):void { map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl(new ZoomControl()); map.addControl(new PositionControl()); map.addControl(new MapTypeControl()); }

Si probamos nuestra película se puede ver que muchas cosas han cambiado. Una vez cargado el mapa, hacemos zoom en nuestra región específica y nuestro tipo de mapa es ahora híbrido. Para determinar la latitud y la longitud de tu región puedes utilizar Google Earth o una herramienta en línea como http://itouchmap.com/latlong.html.

Paso 17: Añadir un marcador

Ahora podemos añadir un simple marcador a nuestro mapa. Solo puedes añadir 2 clases más:

1	import com.google.maps.overlays.MarkerOptions; import com.google.maps.overlays.Marker;
2

y actualizar la función "onMapReady()" con este trozo de código:

1	var marker:Marker = new Marker( new LatLng(28.74659, -13.93447) ); map.addOverlay(marker);
2

De nuevo creamos un punto LatLng con unos valores de latitud/longitud específicos para nuestra ubicación. Luego llamamos a "addOverlay()" para poner nuestro marcador en el mapa. Nuestro código completo tiene ahora este aspecto:

    import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapType; import com.google.maps.controls.ZoomControl; import com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl; import com.google.maps.overlays.MarkerOptions; import com.google.maps.overlays.Marker; // Create The Map var map:Map = new Map(); map.key = "ABQIAAAAUeTGkbea0ftVnzbVMwAPKxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTlsMw9FdPd5mJqEw01CzwnlVdxDw"; map.setSize(new Point(stage.stageWidth, stage.stageHeight)); map.addEventListener(MapEvent.MAP_READY, onMapReady); this.addChild(map); function onMapReady(event:MapEvent):void { map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl(new ZoomControl()); map.addControl(new PositionControl()); map.addControl(new MapTypeControl()); var marker:Marker = new Marker( new LatLng(28.74659, -13.93447) ); map.addOverlay(marker); }

Ve y prueba tu película. Verás nuestro marcador en el mapa.

Paso 18: Todavía más..

Ahora vamos a llevar todo al siguiente nivel. Tenemos un mapa con controles de zoom y un marcador. ¿Qué más necesitamos? Bueno, te lo diré. Necesitamos MÁS MARCADORES, HERRAMIENTAS, VENTANAS DE INFORMACIÓN y queremos cargar todo desde un archivo XML. Así que empecemos. Primero crearemos nuestro archivo XML. Abre tu editor XML favorito y crea este archivo:

    <?xml version="1.0" encoding="utf-8"?> <map_xml> <location> <lat>28.74659</lat> <lon>-13.93447</lon> <name_tip>Majanicho</name_tip> <title_tip><![CDATA[Majanicho]]></title_tip> <content_tip><![CDATA[Majanicho is a very good surf spot for longboarding it offers very long rides.]]></content_tip> </location> <location> <lat>28.738764</lat> <lon>-13.955126</lon> <name_tip>Derecha de los Alemanes</name_tip> <title_tip><![CDATA[La Derecha de los Alemanes]]></title_tip> <content_tip><![CDATA[La Derecha de los Alemanes is another very good spot for longboarders but shortboarders will have some epic days out here to.]]></content_tip> </location> <location> <lat>28.741022</lat> <lon>-13.951821</lon> <name_tip>The Bubbel</name_tip> <title_tip><![CDATA[The Bubbel aka La Derecha]]></title_tip> <content_tip><![CDATA[The Bubbel is one of the most famouse waves in Fuerteventura its a really hollow reef break and it has some epic barrels on offer.]]></content_tip> </location> </map_xml>

Paso 19: onMapReady()

Una vez que nuestro mapa está cargado, tenemos que extraer los datos XML en nuestro archivo Flash. Crea una nueva función llamada "xmlLoader()" y la llamaremos en nuestra función "onMapReady()". Primero tenemos que borrar el código que añadimos para crear nuestro marcador solo unos pasos antes. Luego puedes añadir la línea para llamar a la función "xmlLoader()". Nuestra función "onMapReady()" debería tener ahora este aspecto:

    function onMapReady(event:MapEvent):void { map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl(new ZoomControl()); map.addControl(new PositionControl()); map.addControl(new MapTypeControl()); xmlLoader(); }

A continuación queremos crear la función "xmlLoader()".

1	function xmlLoader(){ }
2

En el siguiente paso lo llenaremos.

Paso 20: Cargar XML

Bien, aquí estamos. Vamos a cargar nuestros datos XML. Dentro de la función "xmlLoader()" puedes añadir este código:

    function loadXML(e:Event):void{ XML.ignoreWhitespace = true; var map_xml:XML = new XML(e.target.data); }// end of loadXML function var xmlLoader:URLLoader = new URLLoader(); xmlLoader.addEventListener(Event.COMPLETE, loadXML); xmlLoader.load(new URLRequest("xml.xml"));

Esto nos dará nuestros datos XML para trabajar.

Paso 21: Recorrer las ubicaciones

Como tenemos 3 ubicaciones en nuestro archivo XML necesitaremos crear un bucle "For" y almacenar todos los datos en algunos Arrays. Dentro de nuestra función "loadXML()" puedes añadir este fragmento de código para crear el bucle For:

1	for (var i:Number = 0; i < map_xml.location.length(); i++){ trace(map_xml.location[i].title_tip); }// end of for loop
2

Para comprobar si las cosas nos funcionan vamos a rastrear la variable "title_tip". Prueba tu película y deberías obtener el siguiente resultado:

Paso 22: Variables

A continuación tenemos que crear algunas variables para almacenar nuestros datos cargados desde el archivo XML. Dentro de nuestro bucle For podemos añadir estas variables:

    var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon); var tip = map_xml.location[i].name_tip; var myTitle:String = map_xml.location[i].title_tip; var myContent:String = map_xml.location[i].content_tip;

Si quieres puedes eliminar la línea "trace()" que utilizamos antes. Nuestro bucle For ahora tiene el siguiente aspecto:

    for (var i:Number = 0; i < map_xml.location.length(); i++){ var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon); var tip = map_xml.location[i].name_tip; var myTitle:String = map_xml.location[i].title_tip; var myContent:String = map_xml.location[i].content_tip; }// end of for loop

Paso 23: Marcadores adicionales..

¡Bien! Puedes añadir un marcador al mapa para cada una de nuestras tres localizaciones. Ahora que tenemos todos los datos almacenados en nuestras variables tendremos que crear una nueva función llamada "createMarker()". Dentro de nuestra función "loadXML()" puedes añadir esta nueva función:

    // Add Markers On The Map function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker { var i:Marker = new Marker( latlng, new MarkerOptions({ hasShadow: true, tooltip: ""+tip }) ); return i; }// end function createMarker

Todavía tenemos que llamar a esta función "createMarker()" para poder ver nuestros marcadores en el mapa. Para ello puedes añadir una línea de código adicional al final de nuestro bucle For:

1	map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent));
2

Este es el aspecto que debería tener ahora nuestra función "loadXML()":

    function loadXML(e:Event):void{ XML.ignoreWhitespace = true; var map_xml:XML = new XML(e.target.data); for (var i:Number = 0; i < map_xml.location.length(); i++){ var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon); var tip = map_xml.location[i].name_tip; var myTitle:String = map_xml.location[i].title_tip; var myContent:String = map_xml.location[i].content_tip; map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent)); }// end of for loop // Add Markers On The Map function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker { var i:Marker = new Marker( latlng, new MarkerOptions({ hasShadow: true, tooltip: ""+tip }) ); return i; }// end function createMarker }// end of loadXML function

¡Prueba tu película y verás los marcadores en el mapa! Ten en cuenta que nuestros 3 puntos están muy cerca unos de otros, por lo que es posible que quieras ampliarlos un poco para verlos con más claridad.

Paso 24: Ventanas de información

Por último, puedes añadir algunas ventanas de información. Si hacemos clic en los marcadores, obtendremos información sobre su ubicación. Para ello puedes añadir dos clases más:

1	import com.google.maps.InfoWindowOptions; import com.google.maps.MapMouseEvent;
2

..un poco más de código a nuestra función "createMarker()"..

1	i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void { map.openInfoWindow(event.latLng, new InfoWindowOptions({ titleHTML: ""+myTitle, contentHTML: ""+myContent })); });
2

Ahora prueba tu película y verás que nuestros marcadores son ahora clicables y que crean una ventana de información con el texto del archivo XML.

Conclusión:

¡Eso es todo! Echa un vistazo a nuestro código final:

    import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapType; import com.google.maps.controls.ZoomControl; import com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl; import com.google.maps.overlays.MarkerOptions; import com.google.maps.overlays.Marker; import com.google.maps.InfoWindowOptions; import com.google.maps.MapMouseEvent; // Create The Map var map:Map = new Map(); map.key = "Your API Key Here"; map.setSize(new Point(stage.stageWidth, stage.stageHeight)); map.addEventListener(MapEvent.MAP_READY, onMapReady); this.addChild(map); function onMapReady(event:MapEvent):void { map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl(new ZoomControl()); map.addControl(new PositionControl()); map.addControl(new MapTypeControl()); xmlLoader(); } function xmlLoader(){ function loadXML(e:Event):void{ XML.ignoreWhitespace = true; var map_xml:XML = new XML(e.target.data); for (var i:Number = 0; i < map_xml.location.length(); i++){ var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon); var tip = map_xml.location[i].name_tip; var myTitle:String = map_xml.location[i].title_tip; var myContent:String = map_xml.location[i].content_tip; map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent)); }// end of for loop // Add Markers On The Map function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker { var i:Marker = new Marker( latlng, new MarkerOptions({ hasShadow: true, tooltip: ""+tip }) ); i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void { map.openInfoWindow(event.latLng, new InfoWindowOptions({ titleHTML: ""+myTitle, contentHTML: ""+myContent })); }); return i; }// end function createMarker }// end of loadXML function var xmlLoader:URLLoader = new URLLoader(); xmlLoader.addEventListener(Event.COMPLETE, loadXML); xmlLoader.load(new URLRequest("xml.xml")); }

Prueba tu película Ctrl+Enter para comprobar el resultado. ¡Tendrás tu propio mapa Flash basado en xml! Puedes utilizarlo en tu sitio web, editar las ubicaciones como quieras, depende de ti. Anímate y experimenta, si tienes algún resultado interesante asegúrate de compartirlo con nosotros.

Espero que te haya gustado este tutorial, ¡gracias por leerlo!