Download - Introducción al API Flash de Google Maps
¿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