Incluye licencia y asistencia para empresas.
Este tutorial explica cómo obtener y configurar el kit de desarrollo de software de Adobe Flex, cómo configurar tu entorno de desarrollo y cómo programar en ActionScript para crear tu primer mapa de API de Google Maps para Flash.
Nota: si prefieres utilizar el entorno integrado de desarrollo de FlexBuilder, consulta el tutorial de FlexBuilder.
Para incorporar Google Maps en una aplicación de Flex, es necesario tener conocimientos sobre el código ActionScript, así como sobre los archivos MXML de Flex. Los ejemplos que se incluyen en esta documentación utilizan el kit de desarrollo gratuito de Adobe Flex 3, disponible en la siguiente dirección URL:
http://www.adobe.com/products/flex/overview/#section-3
Nota: The Flex SDK requires Java 1.4 or 1.5 (depending on the development platform). Puedes consultar el listado completo de requisitos para el desarrollo con el kit de desarrollo de software de Flex en la dirección:
http://www.adobe.com/products/flex/systemreqs/
Una vez que hayas descargado el kit de desarrollo de software, descomprímelo en un directorio de trabajo y asegúrate de que puedas ejecutar el compilador MXML (mxmlc) desde la línea de comandos. El compilador mxmlc está ubicado en el directorio bin del kit de desarrollo de software de Flex. Al ejecutar el compilador con la opción -help, deberías obtener el siguiente resultado.
hostname$ cd flex_sdk/bin hostname$ ./mxmlc -help Adobe Flex Compiler (mxmlc) Version 3.0.0 build 477 Copyright (c) 2004-2007 Adobe Systems, Inc. All rights reserved. ...
También puedes añadir el directorio flex_sdk/bin a la ruta ($PATH), de manera que puedas ejecutar el compilador desde cualquier directorio.
Antes de comenzar el desarrollo, deberás instalar una versión de depuración de Adobe Flash Player. Puedes descargar versiones de depuración del reproductor en la siguiente URL:
http://www.adobe.com/support/flashplayer/downloads.html
Es posible que tengas que desinstalar cualquier versión de Flash Player que no sea de depuración o cerrar el navegador para instalar correctamente la versión de depuración.
¡Nuevo! El API de Google Maps para Flash ofrece ahora compatibilidad nativa con el objeto com.google.maps.Map en Flex. Ya no tienes que ampliar la clase Map para definir tu clase de aplicación Map y puedes utilizar un componente Map directamente en Flex.
Las aplicaciones Flex se definen en las declaraciones MXML. Por lo general, deberás proporcionar estos archivos MXML en la raíz de tu directorio de código fuente.
# Google recommends that you create a "source" directory in the root of your # Application development directory # "Source" MXML application definitions will go here: hostname$ cd myflashapp hostname$ mkdir src
Los componentes que amplían cualquier componente de API de Google Maps para Flash normalmente se deberán proporcionar como bibliotecas de ActionScript en un espacio de nombre único. Google recomienda utilizar un espacio de nombre de tu propiedad para evitar conflictos con otras bibliotecas; esto resulta especialmente importante si hay muchos desarrolladores trabajando en múltiples componentes Flash a la vez. El uso de espacios de nombre también te permite agrupar el código de biblioteca en paquetes, lo que facilita el uso compartido de código común.
Los paquetes y los espacios de nombre se deben definir mediante el dominio de nivel superior, el dominio de organización y el subdominio. Por ejemplo, el espacio de nombre de Google Maps se define como com.google.maps y un paquete examples en ese espacio de nombre se definiría como com.google.maps.examples. A continuación, puedes utilizar este espacio de nombre para definir de forma implícita la estructura de directorio de la aplicación (por ejemplo, com/google/maps/examples/).
# Google recommends that you create a directory structure based on a unique # namespace for development of application extensions # Source ActionScript file will go here: hostname$ cd myflashapp hostname$ mkdir your_unique_domain (e.g. com/google/maps/examples)
Puedes utilizar este espacio de nombre para definir un paquete en el código ActionScript y para definir la aplicación en la declaración MXML. Por lo general, el código ActionScript (archivos *.as) reside en el directorio situado más abajo en cualquier espacio de nombre que se defina, mientras que las declaraciones MXML (archivos *.mxml) residen en la "raíz" de la estructura de directorio.
La manera más sencilla de empezar a aprender a utilizar el API de Google Maps para Flash es observar un sencillo ejemplo. En este tutorial, crearemos un archivo MXML sencillo con un mapa que utiliza código ActionScript, compilaremos ese archivo en un archivo SWF con el kit de desarrollo de software de Flex, incluiremos ese archivo SWF en una página HTML y lo visualizaremos.
La declaración MXML define elementos de la interfaz de usuario en una aplicación Flex, mientras que el código ActionScript integrado en la etiqueta <mx:Script> define acciones sobre dichos elementos de la interfaz de usuario. En el caso más sencillo, sólo tienes que declarar un objeto com.google.maps.Map en MXML e inicializar el mapa con código ActionScript:
| 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<maps:Map xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)"
width="100%" height="100%" key="your_api_key"/>
<mx:Script>
<![CDATA[
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
private function onMapReady(event:Event):void {
this.map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
}
]]>
</mx:Script>
</mx:Application>
Este ejemplo se encuentra en gmaps-samples-flash.googlecode.com/svn/trunk/examples/HelloWorld.html. (el MXML original se encuentra aquí). Ten en cuenta que tendrás que crear tu propio archivo SWF, con tu propia clave de API, para que este ejemplo aparezca en tu sitio web.
Incluso en este sencillo ejemplo, hay varios aspectos que se deben tener en cuenta:
<mx:Application> inicial para contener todo nuestro código, como se requiere en el caso de las aplicaciones Flex. En este objeto <mx:Application>, declaramos un espacio de nombre xm para hacer referencia a los componentes estándar de Flex.Map como subobjeto de <mx:Application> y definimos un espacio de nombre maps para hacer referencia al código desde com.google.maps.*. También definimos parámetros, incluidos una ID (id), un controlador mapevent_mapready y una clave (key) de API. Estos parámetros se explicarán posteriormente.<mx:Script> secundario.mapevent_mapready.En las siguientes secciones se explican estos pasos de forma más detallada.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
Además del código ActionScript, las aplicaciones de Google Maps en Flash requieren un framework de interfaz de usuario para visualizar el mapa y cualquier elemento asociado de la interfaz de usuario en una página web. En el framework de Flex, estos componentes de la interfaz de usuario se especifican en una declaración MXML. Una declaración MXML se compone de un archivo de configuración con el sufijo .mxml. Este archivo MXML reside normalmente en la raíz del directorio de desarrollo de ActionScript.
Para visualizar el mapa de Flash en una página web, necesitarás al menos una declaración MXML. Todas las declaraciones MXML requieren un componente <mx:Application> raíz. Además, el componente <mx:Application> también registra el prefijo mx para hacer referencia a los componentes estándar de Flex.
Ten en cuenta que las declaraciones MXML puede ser bastante complejas y que el diseño de los componentes de la interfaz de usuario en una declaración MXML está fuera del ámbito de esta documentación. Para obtener más información, observa los ejemplos que se proporcionan y la documentación del kit de desarrollo de software de Flex.
<maps:Map xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)" width="100%" height="100%" key="your_api_key"/>
El API de Google Maps para Flash ofrece ahora compatibilidad nativa con el objeto Map definido en el paquete com.google.maps.*. Añadimos un objeto Map aquí como subobjeto de <mx:Application>, definimos su espacio de nombre como maps (vinculándolo al código com.google.maps.*), especificamos una ID (id) con la que podemos hacer referencia al mapa desde el código ActionScript y definimos un controlador mapevent_mapready. (Consulta Gestión de eventos a continuación).
La declaración <maps:Map> también especifica los parámetros width y height para definir cómo aparecerá el mapa en la aplicación. Y lo que es más importante: la declaración MXML sirve como ubicación adecuada para colocar tu clave (key) de API única.
<mx:Script>
<![CDATA[
// ActionScript Code
]]>
</mx:Script>
Los mapas del API de Google Maps para Flash se manipulan con código ActionScript 3.0. Este tutorial no pretende enseñar las peculiaridades de ActionScript. Puedes consultar tutoriales online sobre ActionScript en las siguientes direcciones:
El objeto <mx:Script> es un componente de Flex que contiene una referencia al código ActionScript. Dado que MXML es una variante de XML, también tenemos que informar al analizador MXML de que ignore el código ActionScript en este archivo mediante el uso de los delimitadores <![CDATA[][ y ]]>.
Nota: también puedes proporcionar el código ActionScript en archivos de ActionScript independientes (*.as). Si lo haces, puedes hacer referencia al archivo ActionScript con la inclusión de un parámetro source en la etiqueta <mx:Script>:
<mx:Script source="HelloWorld.as"></mx:Script>
Con frecuencia, la ubicación de código en archivos independientes tiene sentido si tienes aplicaciones complejas o de gran tamaño. No obstante, en esta documentación mostraremos todo el código en línea incluido en las declaraciones MXML para simplificar.
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
Las bibliotecas de ActionScript se importan con la declaración import. En el anterior código de ejemplo, importamos varias bibliotecas Flash de Google Maps.
Deberás asegurarte de importar las bibliotecas de los tipos que necesites en tu código de ejemplo. Te recomendamos que importes únicamente las clases que necesites. En la mayoría de los ejemplos que se incluyen en esta documentación, estructuramos el código de forma que el objeto <mx:Application> no utilice componentes de la interfaz de usuario de Flex. Al hacerlo, obtenemos un mapa básico de tamaño reducido. Ten en cuenta que la inclusión de cualquier biblioteca de Flex podría aumentar sustancialmente el tamaño de los archivos SWF, aunque sólo necesites un componente de Flex en concreto (como, por ejemplo, un botón).
Al igual que JavaScript, ActionScript es un lenguaje de programación generado por eventos. Las interacciones con usuarios en objetos Flash se gestionan mediante el registro de detectores de eventos en objetos para eventos específicos.
En el fragmento de código de la sección anterior, la declaración Map añadió un detector de eventos al objeto Map para el evento MapEvent.MAP_READY mediante el uso del parámetro especial mapevent_mapready. Este controlador de eventos actúa como "enlace" para la inicialización de la aplicación del API de Google Maps para Flash. Cuando el mapa recibe ese evento, llama a la función onMapReady, que se muestra a continuación.
function onMapReady(event:MapEvent):void {
setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
}
Esta función onMapReady() transmite un parámetro event del tipo MapEvent (que se ignora en este caso) y, a continuación, llama a setCenter() con los parámetros proporcionados (que definen una ubicación, un nivel de zoom y el tipo de mapa que se mostrará).
En general, se recomienda "inicializar" el mapa de dicha forma, interceptando y gestionando el evento MapEvent.MAP_READY. Los eventos se explican de forma más detallada en la sección Eventos de mapas de la documentación de Flash de Google Maps.
Nota: You may also initialize your map by intercepting and handling the MapEvent.MAP_PREINITIALIZE event instead. Para obtener información sobre este evento, consulta la explicación de MapOptions.
Los eventos se explican de forma más detallada en la sección Eventos de mapas de la documentación de Flash de Google Maps.
Ahora tenemos un objeto HelloWorld.mxml en el directorio raíz de nuestro origen y código ActionScript en el objeto <mx:Script> de ese archivo. Estamos preparados para compilar nuestro código en un archivo SWF (Shockwave Flash). Para ello, utilizamos el compilador mxmlc del kit de desarrollo de software de Flex.
El compilador mxmlc requiere un archivo *.mxml de destino. Asimismo, para utilizar el API de Google Maps para Flash, utilizamos el parámetro -library-path del compilador y añadimos la ubicación de la biblioteca del API de Google Maps para Flash (maps_flex_1_7.swc) que se te ha proporcionado. A continuación aparece una llamada de ejemplo:
# Execute this command from the ROOT of your development directory, not from within # the leaf of the namespace (e.g. not in com/google/maps/examples) # hostname$:~/src/helloworld$ path_to_flex_sdk/bin/mxmlc HelloWorld.mxml -library-path+=maps_flex_1_7.swc Loading configuration file /home/src/flex_sdk/frameworks/flex-config.xml /home/src/helloworld/HelloWorld.swf (22223 bytes)
Si tienes problemas con la compilación:
mxmlc (puedes cambiar la ruta para añadir el directorio bin del kit de desarrollo de software de Flex.library-path con el operador "más igual" (+=).Una vez que tengas un archivo HelloWorld.swf, puedes insertar ese archivo en una página web.
Si se compilan con la clave de API incluida, los archivos SWF para Flash de Google Maps se pueden mostrar como archivos independientes. Esta función es útil para realizar pruebas, pero puede no resultar práctica para un diseño de página adecuado. Por ello, es posible que quieras configurar una página HTML que contenga el archivo SWF. Para garantizar que el archivo SWF se ejecute en Internet Explorer y otros navegadores, deberás añadir el archivo SWF en las etiquetas object y embed.
A continuación se muestra una página HTML sencilla que contiene nuestro archivo HelloWorld.swf. Para que el mapa se muestre en una página web, debemos reservar un lugar para él. En este ejemplo, creamos un elemento div con nombre y le añadimos el elemento object.
<div id="map_canvas" name="map_canvas">
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="800px"
height="600px">
<param name="movie" value="helloworld.swf">
<param name="quality" value="high">
<param name="flashVars" value="key=your_api_key">
<embed
width="800px"
height="600px"
src="helloworld.swf"
quality="high"
flashVars="key=your_api_key"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash">
</embed>
</object>
</div>
Fíjate en que añadimos el parámetro de clave de API en un parámetro flashVars. Este método de registro es una alternativa a la compilación de la clave en el archivo SWF dentro de la declaración MXML. Si los valores se especifican aquí, anularán los valores incluidos en la declaración MXML o en el archivo SWF. Además, ten en cuenta que la clave de API debe coincidir con el dominio en el que se encuentra alojado el archivo SWF, no con el dominio donde se encuentra alojado el archivo HTML.
A continuación se muestra la página HTML resultante.
¡Enhorabuena! ¡Has creado tu primera aplicación de Google Maps en Flash!