Introducción al API Flash de Google Maps

2,770 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,770
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducción al API Flash de Google Maps

  1. 1. ¿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
  2. 2. • 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.
  3. 3. 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
  4. 4. 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.
  5. 5. <?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>
  6. 6. • 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.
  7. 7. <?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>
  8. 8. <maps:Map id="map" mapevent_mappreinitialize="onMapPreinitialize(event)" mapevent_mapready="onMapReady(event)" width="100%" height="100%" key="ABQIAAAA32a5qLBz6NmxwUVh- 6rzthScdxAlIjSga_SIx5BMb7ZpjMRdQhSzYOWduGlBMwMrq0hfYceLWg1muw"/> </mx:Application>
  9. 9. • 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!"})); }
  10. 10. • 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); }
  11. 11. Iconos ‐> código Polilíneas codificadas ‐> código Polígonos ‐> código Superposiciones de terreno ‐> código
  12. 12. • 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

×