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

This entry was posted in Flex, google maps and tagged , , , , . Bookmark the permalink.

3 Responses to Flex and Google Maps

  1. Nelson says:

    Hi,
    I am very impressed with this demo. I want to add the rotating cube on my map as well. But I just don’t know how do you add the rotating cube as an overlay on the map.

    best regards,

    Nelson

  2. Bob says:

    This is a great demonstration. Can you provide a copy of the Flex application that you used to create this example. I am just starting with Google Maps. Your example would be most helpful.

  3. Kenneth says:

    There is nothing in my app that can’t be found in the link from the article.
    The only extra things I’ve added was the cube, windows and the smooth panning. I’m not releasing the cube code but you really should check out links like
    http://code.google.com/p/gmaps-samples-flash/source/browse/trunk/samplecode/MapMarkers.mxml

    and

    http://code.google.com/p/gmaps-samples-flash/source/browse/trunk/samplecode/ControlPositioning.mxml

    Just copy and paste the examples into flexbuilder ( probably just need to change the key ) and they should just work.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">