Presentación desarrollada para apoyar mi clase sobre el uso del API Flash de Google Maps en la asignatura Laboratorio de Software de Comunicaciones de la Escuela Técnica Superior de Ingenieros de Telecomunicación de la Universidad Politécnica de Madrid.

2. ¿Esto de qué va?
Configuración del entorno de trabajo
Hello Map!
Aspecto básicos y controles
Eventos
Superposiciones
Por si os habéis perdido en algo

3. • Todos conocemos Google Maps…
y nos gusta ☺
• Varios APIs para integrarlo en
nuestras aplicaciones.
• Los más importantes:
– API JavaScript
– API Flash (Flex y AIR)
• Nosotros utilizaremos el API
Flash desde Flex Builder.

4. 1. Obtener una clave del API de Maps.
• Sin limitaciones hasta las 500.000 visitas diarias.
• Sin publicidad.
• Para aplicaciones de libre acceso.
• Registro y resto de condiciones en:
o http://code.google.com/intl/es/apis/maps/signup.html
2. Descargar el kit de desarrollo de:
• http://maps.googleapis.com/maps/flash/release/sdk.zip
• En la carpeta lib, usaremos el archivo map_flex_*.swc

5. 3. Descargar e instalar Flex Builder de:
• http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexbuilder3
4. Configurar el proyecto en Flex Builder:
• Creamos un proyecto nuevo: HelloMap.
• Añadimos la biblioteca del API de Google Maps al
proyecto copiando el archivo map_flex_*.swc en
la carpeta libs.
• A partir de ahora podremos hacer uso del API.

6. <?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<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>
<maps:Map
xmlns:maps="com.google.maps.*"
id="map"
mapevent_mapready="onMapReady(event)"
width="100%" height="100%"
key=“{api_key}"/>
</mx:Application>

7. • Se trabajan con latitudes y longitudes:
var myGeographicCoordinates:LatLng = new LatLng(myLatitude, myLongitude);
• Evento MapEvent.MAP_PREINITIALIZE:
– Se activa cuando el mapa está preparado para recibir
parámetros de inicialización, pero antes de que el mapa esté
listo para un uso generalizado.
• Evento MapEvent.MAP_READY:
– Se activa después de haber dibujado un mapa predeterminado.
– Aquí es donde añadimos los controles al mapa y los posibles
Listener de eventos del mapa.

8. <?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:maps="com.google.maps.*“ layout="absolute">
<mx:Script>
<![CDATA[
import com.google.maps.MapOptions;
import com.google.maps.controls.ScaleControl;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.LatLng;
import com.google.maps.MapType;
private function onMapPreinitialize(event:Event):void {
var myMapOptions:MapOptions = new MapOptions();
myMapOptions.zoom = 6;
myMapOptions.center = new LatLng(40.426199,-3.69976);
myMapOptions.mapType = MapType.NORMAL_MAP_TYPE;
this.map.setInitOptions(myMapOptions);
}
private function onMapReady(event:Event):void {
map.addControl(new PositionControl());
map.addControl(new ZoomControl());
map.addControl(new MapTypeControl());
map.addControl(new ScaleControl());
}
]]>
</mx:Script>

9. <maps:Map
id="map"
mapevent_mappreinitialize="onMapPreinitialize(event)"
mapevent_mapready="onMapReady(event)"
width="100%" height="100%"
key="ABQIAAAA32a5qLBz6NmxwUVh-
6rzthScdxAlIjSga_SIx5BMb7ZpjMRdQhSzYOWduGlBMwMrq0hfYceLWg1muw"/>
</mx:Application>

10. • Ventanas de información:
private function onMapReady(event:MapEvent):void {
setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
openInfoWindow(getCenter(), new InfoWindowOptions({title: "Hello", content: "World"}));
}
• Eventos de mapa (MapEvent, MapMouseEvent…):
private function onMapReady(event:MapEvent):void {
map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
map.addEventListener(MapMouseEvent.CLICK, onMapClick);
}
private function onMapClick(event:MapMouseEvent):void {
map.openInfoWindow(event.latLng,
new InfoWindowOptions({title: "Click Event", content: "You clicked the map!"}));
}

11. • Marcadores
private function onMapReady(event:Event):void {
map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
var markerA:Marker = new Marker(
new LatLng(48.858842, 2.346997),
new MarkerOptions({
strokeStyle: new StrokeStyle({color: 0x987654}),
fillStyle: new FillStyle({color: 0x223344, alpha: 0.8}),
radius: 12,
hasShadow: true
}));
map.addOverlay(markerA);
}
• Marcadores con eventos
private function onMapReady(event:Event):void {
map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
var marker:Marker = new Marker(getCenter(), new MarkerOptions({draggable: true}));
marker.addEventListener(MapMouseEvent.DRAG_START, function(event:Event):void {
map.closeInfoWindow();
});
marker.addEventListener(MapMouseEvent.DRAG_END, function(event:Event):void {
marker.openInfoWindow(new InfoWindowOptions({content:"Just bouncing along..."}));
});
map.addOverlay(marker);
}

12. Iconos ‐> código
Polilíneas codificadas ‐> código
Polígonos ‐> código
Superposiciones de terreno ‐> código

13. • API de Google Maps para Flash:
– http://code.google.com/intl/es‐ES/apis/maps/documentation/flash/
• Tutorial de configuración de FlexBuilder:
– http://code.google.com/intl/es/apis/maps/documentation/flash/tutorial‐
flexbuilder.html
• Guía del desarrollador del API de Google Maps
para Flash:
– http://code.google.com/intl/es/apis/maps/documentation/flash/intro.ht
ml
• Referencia del API para ActionScript:
– http://code.google.com/intl/es/apis/maps/documentation/flash/referenc
e.html