



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, 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]);
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


More Options ...
Categories
Tag Cloud
Blog RSS
Comments RSS

Void « Default
Life
Earth
Wind
Water
Fire
Light 