Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ActionScript

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

Read Time: 12 mins

Spanish (Español) translation by Esther (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".

google maps api for flashgoogle maps api for flashgoogle maps api for flash

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".

google maps api for flashgoogle maps api for flashgoogle maps api for flash

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.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

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.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

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".

google maps api for flashgoogle maps api for flashgoogle maps api for flash

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.

google maps api for flashgoogle maps api for flashgoogle maps api for 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).

google maps api for flashgoogle maps api for flashgoogle maps api for flash

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".

google maps api for flashgoogle maps api for flashgoogle maps api for flash

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.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Paso 10: La capa de acciones

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

google maps api for flashgoogle maps api for flashgoogle maps api for flash

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:

google maps api for flashgoogle maps api for flashgoogle maps api for flash

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.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

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.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

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:

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.

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.

Nuestro código completo tiene ahora este aspecto:

google maps api for flashgoogle maps api for flashgoogle maps api for flash

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..

google maps api for flashgoogle maps api for flashgoogle maps api for flash

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()".

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:

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.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Paso 17: Añadir un marcador

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

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

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:

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

google maps api for flashgoogle maps api for flashgoogle maps api for flash

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:


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:

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

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:

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:

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:

google maps api for flashgoogle maps api for flashgoogle maps api for flash

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:

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


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:

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:

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

¡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.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

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:

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

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.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Conclusión:

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


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!

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.