Hace un tiempo usé un componente de AFcomponet que nos permitía usar Google Maps. Dicho momento dejo de funcionar dado los cambios que propuso Google al publicar su API con nuevos cambios y la publicación para flash.
De esa manera ahora no necesitamos de un componente de tercero para poder tener mapas en nuestra web.
Podrán comprobar que la Api provista por Google es mucho más amigable y simple, también cuenta con una velocidad considerablemente más rápida en lo que se refiere a acceso de datos.
Cuenta también una extensa hoja de referencia lo cual nos va a hacer fácil el desarrollo de cualquier aplicación sea para Flash, AIR o Flex.
Antes que todo lo que necesitan es gestionar una llave (Key (1)) para utilizar la API, para ello deben visitar este link: http://code.google.com/intl/es-ES/apis/maps/signup.htm es importante que sean usuarios registrados de google (Gmail por ejemplo), y la clave va relacionada directamente con el dominio (2) donde ejecutaran la aplicación.
Código :
// importamos las clases necesarias, están son las básicas para este ejemplo alcanzan. Al final del tutorial les dejo el link de las referencias para que puedan ver cada clase en particular.
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.controls.*;
import com.google.maps.LatLng;
//seteamos el ancho y alto de nuestra película
var ANCHO:int = stage.stageWidth;
var ALTO:int = stage.stageHeight;
//creamos nuevo objeto Map
var map:Map = new Map();
//aquí pegamos el código de la llave que sacamos en el primer paso
map.key = "ABQIAAAAvvxprSVgDmort-nQvP9UOBRcIBM5SEgUYyuJIuqH4Qf0kgkYgBT_K4sLwopPkxZFAw-tlQLIRz3sTA";
//seteamos el alto y ancho del mapa
map.setSize(new Point(ANCHO, ALTO));
//agregamos un detector de evento para cuando se completo la carga
map.addEventListener(MapEvent.MAP_READY, onMapReady);
//cargamos el mapa a nuestra lista de visualización
this.addChild(map);
//este es un poniter que agregue yo, el que viene no me gusta
var pointer:Pointer = new Pointer();
this.addChild(pointer);
pointer.x = (ANCHO/2)-(pointer.width/2);
pointer.y = (ALTO/2)-(pointer.height/2);
pointer.alpha = 0.5;
//en este campo vamos a imprimir las coordenadas y zoom actuales, si comentan estas líneas pueden ocultar esta parte
var texto:TextField = new TextField();
var formatoTexto:TextFormat = new TextFormat();
this.addChild(texto);
formatoTexto.font = "Arial";
formatoTexto.size = 12;
formatoTexto.align = TextFormatAlign.LEFT;
formatoTexto.bold = true;
texto.multiline = true;
texto.background = true;
texto.autoSize = TextFieldAutoSize.LEFT;
texto.defaultTextFormat = formatoTexto;
//si se cargo todo bien ejecutamos!
function onMapReady(event:Event):void {
//centramos el mapa a las coordenadas deseadas (-31...,-64...) e indicamos el zoom (12) y tipo de mapa por defecto (MapType.NORMAL_MAP_TYPE)
map.setCenter(new LatLng(-31.409619,-64.184532), 12, MapType.NORMAL_MAP_TYPE);
//mostramos el control de zoom
map.addControl(new ZoomControl());
//el control de posicion
map.addControl(new PositionControl());
//el selector de tipo de mapa
map.addControl(new MapTypeControl());
//el evento para reimprimir las coordenadas cuando desplazamos el mapa
map.addEventListener(Event.ENTER_FRAME,coordenadas);
}
//imprimimos las coordenadas en el campito de texto
function coordenadas(e:Event):void {
texto.text = "Lat/Lng: "+e.currentTarget.getCenter()+"\rZoom: "+e.currentTarget.getZoom() ;
texto.x = (ANCHO-texto.textWidth)-10;
texto.y = (ALTO-texto.textHeight)-10;
}
Código :
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.controls.*;
import com.google.maps.LatLng;
//IMPORTAMOS LA CLASE PARA TRABAJAR CON MARCADORES
import com.google.maps.overlays.*;
var map:Map = new Map();
//CREAMOS UNA VARIABLE CON EL TIPO MARKER
var marker:Marker;
map.key="ABQIAAAAvvxprSVgDmort-nQvP9UOBRcIBM5SEgUYyuJIuqH4Qf0kgkYgBT_K4sLwopPkxZFAw-tlQLIRz3sTA";
map.addEventListener(MapEvent.MAP_READY, onMapReady);
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
this.addChild(map);
function onMapReady(event:Event):void {
//centramos el mapa a las coordenadas deseadas (-31...,-64...) e indicamos el zoom (12) y tipo de mapa por defecto (MapType.NORMAL_MAP_TYPE)
map.setCenter(new LatLng(-31.409619,-64.184532), 12, MapType.NORMAL_MAP_TYPE);
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
//CREAMOS UN NUEVO OBJETO CON LAS COORDENADAS DEL MARCADOR
marker=new Marker(new LatLng(-31.409619,-64.184532));
//Y LO AGREGAMOS A LA VISUALIZACION DEL MAPA
map.addOverlay(marker);
}Código :
package
{
import com.google.maps.InfoWindowOptions;
import com.google.maps.LatLng;
import com.google.maps.LatLngBounds;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapMouseEvent;
import com.google.maps.MapType;
import com.google.maps.controls.*;
import com.google.maps.LatLng;
import com.google.maps.overlays.*;
import flash.display.Loader;
import flash.events.Event;
import flash.display.MovieClip;
import flash.geom.Point;
import flash.net.URLRequest;
public class GoogleMapMentesFlash extends MovieClip
{
private var map:Map;
private var marker:Marker;
private var lat:Number = -34.60810266502464;
private var lon:Number = -58.37216377258301;
private var latMarker:Number = lat;
private var lonMarker:Number = lon;
////
public var marker_icon:MovieClip;
public var dragDisabled:Boolean = false;
private var hideControles:Boolean = false;
private var anchoMap:Number = 500;
private var altoMap:Number = 500;
private var zoomInit:Number = 16;
private var titleTool:String = "Plaza de Mayo, Buenos Aires - Argentina";
private var contentTool:String = "www.mentesflash.com.ar/blog/";
public function GoogleMapMentesFlash()
{
addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
}
private function onAddedToStage(e:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
map = new Map();
map.key="ABQIAAAAAFtvOzcJURr-Vk0r5EfhqBQkeRyOL7awFQhJYx5Sj4jc3OO3QxSv9WavazbanfZ1P6Hk_yhNdVoyjA";
map.addEventListener(MapEvent.MAP_READY, onMapReady);
map.setSize(new Point(anchoMap, altoMap));
this.addChild(map);
}
private function onMapReady(event:Event):void {
map.setCenter(new LatLng(lat, lon), zoomInit, MapType.NORMAL_MAP_TYPE);
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
var markerOptions:MarkerOptions = new MarkerOptions();
markerOptions.icon = marker_icon;
if(hideControles){
map.clearControls();
}
if (dragDisabled) {
map.disableDragging();
}
var marker:Marker = new Marker(new LatLng(latMarker, lonMarker),markerOptions);
marker.addEventListener(MapMouseEvent.ROLL_OVER, function(event:Event):void {
marker.openInfoWindow(new InfoWindowOptions( { title: titleTool, content: contentTool } ));
});
map.addOverlay(marker);
}
}
}