Flex and Google Maps
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
[ad name=”ad-1″]