¿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

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

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

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.

<?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:Mapxmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)" width="100%" height="100%" key=“{api_key}"/>

</mx:Application>

• Se trabajan con latitudes y longitudes:

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

var myGeographicCoordinates:LatLng = new LatLng(myLatitude, myLongitude);

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

<maps:Mapid="map"mapevent_mappreinitialize="onMapPreinitialize(event)"mapevent_mapready="onMapReady(event)" width="100%" height="100%" key="ABQIAAAA32a5qLBz6NmxwUVh-6rzthScdxAlIjSga_SIx5BMb7ZpjMRdQhSzYOWduGlBMwMrq0hfYceLWg1muw"/>

</mx:Application>

• Ventanas de información:

• Eventos de mapa (MapEvent, MapMouseEvent…):

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"}));

}

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!"}));}

• Marcadores

• Marcadores  con eventos

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);

}

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);}

Iconos ‐> código

Polilíneas codificadas ‐> código

Polígonos ‐> código

Superposiciones de terreno ‐> código

• 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 Mapspara 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