Google has just announced the Google Maps API for Flash.  This AS3 library will allow you to natively put Google Maps into your Flex or Flash apps without having to do any hacky-hack iFrame/div methods.  You can read the announcement on Google’s blog.

The topic around dynamically resizing Yahoo! Maps in Flex came up in the Yahoo! Flash Developer Group last week. At the same time, I had also been trying to solve this problem for a project I’m working on. At first this problem seemed quite mysterious. I could resize the map, but it was always resizing to a 3×2 aspect ratio. If I had a container was not 3×2, the map would pin itself to the top of the container and have white borders to the right and bottom. I tried all possible combinations of properties (height, width, percentHeight, percentWidth, scaleContent) with no luck.

Yahoo! provides an AS3 API for Flex 2.0 developers that includes a SWF (built in AS2.0) and a SWC. The AS3 AstraWebAPI libraries are a set of wrapper tools that facilitate access to Yahoo!’s Web APIs from Flex 2.0 and Flash. This library works quite well, but it only exposes a subset of the API calls that are allowed by the Yahoo! API’s - so as a Flex developer you only have access to the most common calls. Unfortunately the AstraWebAPI swc does not include the setMapSize method that is defined in the as2map.swf file. So how do we access this method?

A little background. as2map.swf is an ActionScript 2 swf that you load into your Flex application when you instantiate a Yahoo Map. The AstraWebAPIs.swc file then provides a set of wrapper classes that uses ExternalInterface to communicate between your Flex application and the as2map.swf. It sounds kind of ugly - and is - but until Yahoo! releases an AS3 version of their mapping tool, this method will have to do.

So how do we make API calls to methods not exposed by AstraWebAPIs.swc file? My solution is to call the ExternalInterfaceBuffer directly from within your Flex application. It’s pretty easy to do…


import com.yahoo.webapis.maps.utils.ExternalInterfaceBuffer;

private function resizeMap(someWidth:int, someHeight:int) : void {
   // SWFDOMID and UNIQUEID are constants set in your existing map code
   var apiCall:String = SWFDOMID + ".setMapSize" + UNIQUEID;
   var EIBuffer:ExternalInterfaceBuffer = ExternalInterfaceBuffer.getInstance();
   EIBuffer.addCall({method:apiCall, data:{w:someWidth, h:someHeight})
}


I have provided an example (with source available here) that you can look at.

The most recent short book release by Pragmatic Programmers is titled - Google Maps and Ajax. It outlines and explains how to hookup Google Maps, Geo Coding and AJAX to create a simple mashup.

There apparently is a way to Use Google Maps without an API Key.

I fully understand why Google requires developers to apply for and use an API key, and I would certainly do this for any site I was to place on a production website, but a recent project where I was doing some Google Map hacking made it clear to me that the API key policy was a bit restrictive for solely testing purposes. When you apply for an API key, you need to specify a top level domain and the exact path to the location of your Google Map. If you need to change the path, you must reapply for an API key and modify your code accordingly. Needless to say, I found this to be a bit inconvenient as I ended up moving the file a couple of times.