GoogleMaps con flex

Vamos a dar tres tips simples e interesantes.
Como habiamos contado, GoogleMaps ofrece tres opciones para trabajar con Flash. La única gratuita es con el compilador basico de Flex.
El tutorial de como arrancar y llegar a algo lo pueden encontrar en:
http://code.google.com/intl/es/apis/maps/documentation/flash/tutorial-flex.html
Como google es la guía real y manual de si mismo, solo brindarles algunas cositas (unos codiguitos...) interesantes.


Tener una función para agregar puntos


Es muy recomendable tener una funcion que, ya sea por un click en una opción, o al cargar info desde un xml, tener una función que ponga el marker o punto en el mapa.

import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapMouseEvent;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.InfoWindowOptions;
import com.google.maps.LatLngBounds;
import com.google.maps.styles.FillStyle;

[Embed(source="iconEvent.png")] private var
myIcon:Class

private function addMarker (address:String, title:String, html:String): void {

    var latlangAr:Array = address.split(", ");
    var xPoint:LatLng = new LatLng(latlangAr[0] , latlangAr[1]);

    var marker:Marker;
    marker = new Marker(xPoint, new MarkerOptions(
{icon:new myIcon(), iconOffset : new flash.geom.Point::Point(-15, -15) }
));
    gBounds.extend(xPoint);

    marker.addEventListener(MapMouseEvent.CLICK, function (event:MapMouseEvent):void {
        var optionsBubble:InfoWindowOptions = new InfoWindowOptions({
            titleHTML: title,
            contentHTML: html,
            fillStyle : new FillStyle({ alpha : 0.9,  color: 0xffffff})
            });

        marker.openInfoWindow(optionsBubble);
    });
    map.addOverlay(marker);

}

Veamos algunos detalles: se recibe una String del formato "latitud, longitud" , les recomiendo adaptar esto a sus necesidades. Yo levantaba info de un xml que venia en este formato.
Luego, al momento de crear el marker, utilizamos la funcion myIcon() (que simplemente devuelve un icono que fue embebido, y en la línea siguiente se extiende el alcanze del mapa  con ese punto (util para luego centrar u operar con zooms).
Seguidamente agregamos el infowindow (la burbuja) que se abre al hacer click. Lo importante (en este caso) de las opciones, es el fillStyle, que nos permite manejar el alpha y cambiar el color de fondo. Luego se agrega el marker al mapa.


Ponerle colores con ColorMatrix


Usar el filter colorMatrix en flash para cambiar el color general de la aplicación suele ser muy útil.
Dejo dos links utiles:

http://www.insideria.com/2009/05/having-fun-with-google-maps-fl.html
http://www.axismaps.com/blog/2009/02/spicing-up-google-maps-in-flash/

Lo que quiero agregar es que para que la matrix afecte sólo al mapa de fondo y no todo (por ejemplo, que no afecte a nuestros íconos) les dejo esta función a la que se le pasa el filtro.

private function setMapFilter( filter : ColorMatrixFilter ) : void
          {
              var s1:Sprite = map.getChildAt(1) as Sprite;
              var s2:Sprite = s1.getChildAt(0) as Sprite;
              s2.filters = [ filter ];  
           }

Es mágica.


Zoom animado a un punto


El zoom en gmaps sólo es suave cuando se cambia un punto. Asi que luego de buscar opciones, y no encontrarlas, surgió la idea de hacer un zoom punto por punto con un timer. El resultado:

public var zoomEffects:int = 1;
map.enableScrollWheelZoom();
map.enableContinuousZoom();           
//zoom effect
            map.addEventListener(MapZoomEvent.ZOOM_CHANGED,
                        function (event:MapZoomEvent):void {
                            zoomEffects++;
                            if (zoomEffects <= 6) {
                               
                                var mTimer:Timer = new Timer(300, 1);
                                mTimer.addEventListener("timer",
                                    function (): void {
                                        if (map.getZoom() < 6) {
                                            map.zoomIn(null,false, true);
                                        }
                                    });
                                mTimer.start();
                            }
                        });
            gBounds.extend(xPoint);
            map.setCenter(xPoint);
            map.zoomIn(null,false, true);

El punto es xPoint . La idea es que al hacer un zoom, se arranque un timer que dispare otro zoom en 300 ms, esto, mientras una variable no llegue a 6 (haria por ende 6 zooms). Luego de definir eso, centramos en xPoint, y lanzamos un zoom.
Espero que les sea útil.