Flex and Google Maps

Kenneth — Fri, 08 May 2009 08:18:31 +0000

I started to try out some flex with Google maps and it’s refreshingly straight forward.

Virtually all of the information to do the below can be found here http://code.google.com/apis/maps/documentation/flash/reference.html

So I’m just going to highlight a couple of things I did that were not in the docs.

Panning

Panning, well there is an example on how to do panning in ‘tour de flex’ but it uses a very basic method to work out difference between 2 points, divide by 100 and just add difference to starting point using the timer function.

A much better way would be to use a Tween so that you can implement an easing function, but a tween will only do one value at a time and a point has two values.

So I used the Move class. It moves an object from point A to point B which is exactly what I was after, but I just wanted the values as I’m not moving an object.

Here is the actionscript code to implement it

//The move effect needs a target  otherwise it will NOT tween
//so just create a temporary target
var uiTemp : UIComponent = new UIComponent();
moveEffect = new Move();
//set up the move effect
moveEffect.xFrom = currentLatLng.x;
moveEffect.yFrom = currentLatLng.y;
moveEffect.duration = 1500;
moveEffect.easingFunction = moveMap;
moveEffect.xTo = Number(mapDetails.lat);
moveEffect.yTo = Number(mapDetails.long);
 
//on each update move the map
//calls the map.setCenter method
moveEffect.addEventListener(TweenEvent.TWEEN_UPDATE, updateMapPosition, false, 0, true);
//at the end I open up the marker window
moveEffect.addEventListener(TweenEvent.TWEEN_END, showMarker, false, 0, true);
//Play effect, give it the target so that it actually plays
moveEffect.play([uiTemp]);

Marker Windows

The information window that pops up beside the marker on the map needed to be an image with some text. I never noticed any examples in the docs for this but I did see an example online so I thought I’d stick into this post as well to increase its coverage.

Again very straight forward (Google really makes it easy for developers) check out the code below.

//In order to open a window beside a marker you need a InfoWindowOptions
var options:InfoWindowOptions = new InfoWindowOptions({
    //This is the key line for making it into a custom window
    //uiHolder is a Canvas (but it can be any UIComponent) and I'm sure you know what you can put into
    //a UIComponent, anything you like :)
    customContent: uiHolder,
 
    padding : 7,
    width: 262,
    height: 262,
    drawDefaultFrame: true
});
//Take the marker that you wish the window to appear above and
//call openInfoWindow and pass in the InfoWindowOptions you just created
currentOpenMarker.openInfoWindow(options);

Click to open app in new window

Click to open app2 in new window

Blue Flex » google maps

Flex and Google Maps

Panning

Marker Windows