Google Maps API for Flash + AIR

When I gave my talk about mapping solutions in Flash/Flex/AIR, one point I made was due to the TOS with Google Maps, you would be unable to use it in an AIR application. Well as of Tuesday, that is no longer true. The Google Maps team just released version 1.8, and this version can be used in AIR apps!

For more information (and screenshots!), read through their snazzy new tutorial on developing AIR apps in Flex Builder.

Google Maps Flash API Update

Missed this update while I was attending 360|Flex, but the map team at Google has released another update to their Maps API. I haven’t installed it yet, but from the change log here are some of the major items of note:

• driving directions
• custom info windows
• custom overlays

And of course bug fixes. Pamela Fox on the Maps team has created several demos.

Mapping Talk from August San Diego Flash User Group Meeting

At the August San Diego Flash User’s Group meeting, I gave a presentation on mapping solutions that are available for use in the Flash Platform. I want to say thanks to Zach Graves at Yahoo! who helped with some of the finer points of the Yahoo! solution. The slides are very visual, but there is some sample code tucked away in the deck. The main take away, was there are several great solutions available to Flash developers.

Some of the key points are: what is the map coverage of the interested area. This is an area of concern of an app I am developing. Adobe AIR support is also something to be aware of in picking your map solution.

One nice surprise was learning about the globe feature in the Mapquest 5.3 api.

Google Map Project update

Been thinking about the various issues that I had with the first release of the Google Map API for Flash. In the latest release, 1.4, the team fixed one of my issues. Mucho Thanks!. That was the issue of not being able to center a marker in both the vertical and horizontal. I folded the update into the code (I still need to merge back some mods from the Yahoo! version), and the overlays appeared exactly as I wanted them too. So good bye all that fun math I had been using!

So, I started thinking of solutions to the issue that markers pop to the top of the z-order when you rollover them. I understand the behaviour for this, I just wish it was a setting you could easily change. My first thought was to use the BitmapData class to create a composite graphic from the PNGs I was currently using. I played with this solution for a while. Then I had an AHA moment. 

While I was changing the application to use RSL to keep the file size down, I started thinking about linking in the PNGs for the overlay. Then something hit me and said, “They are fraking circles, just draw them in code” So I wrote a quick test and it worked great. Here a preview of the app.

So now I need to rebuild the engine that calculates the blast distances to create the single image. 

Google Map Update

The folks over at Google have released an update to their API for Flash. The most notable thing for me is that they addressed not being able to center in both the vertical and horizontal. The code is simply:

iconAlignment: MarkerOptions.ALIGN_VERTICAL_CENTER + MarkerOptions.ALIGN_HORIZONTAL_CENTER;

Yeah!

Now to cook up a solution to the marker z order issue. Can you say BitmapData class. I thought you could.

So long, Google Maps

Well, I spent most of the morning trying various things to get custom markers/overlays to work in the Google Maps API. The first real issue the fact that you cannot center the marker image in BOTH horizontally and vertically at the same time. Can someone explain why this is not an option??!? I have every other alignment as an option, but not this one?

So I reworked the code a bit to try to solve this. Since the overlays are circles that stack one on top of another, I need them to properly align. My solution was to use the one of the built in alignment settings to take care of one axis, then recalculated the Latitude based on the size of the overlay, so I could align it in the other direction. The visual outcome was ok, but not what you want to see in code.

Then came the straw that broke the camel’s back. It seems if you rollover the marker, it pops to the top of the z-order. Well, I’m stacking a series of concentric circles around a center point, and popping the outermost circle to the top and blocking the inner circles, well that is not going to work. I could not seem to locate a method to disable this.

So I’ve pulled the code from the site, and am now recoding it using the Yahoo! AS3 Map. If that fails, I might shelve the project, or use the HTML/JS wrapper solution that folks were using before.

Ugh! (Plus it is freaking raining in San Diego on Memorial Day weekend!)

Google Map: Part Duex

So, someone asked about getting at the Bitmap Data needed for a custom marker in the new Google Map API. Here’s what I did, I added the following MXML to my Flex project:

       <mx:Image source=”@Embed(‘images/radii.png’)” visible=”false” id=”blastOverlayImage” />

You’ll note that I set the visible property to false, so it is not shown. There was no real reason to include the image this way, I could have just loaded it via a loader. Somehow one line of MXML seemed easier than the lines of code needed for loader.

So to prepare image for the MarkerOptions function, I created a new DisplayObject and set it to the image’s content. Once it is assigned to the DisplayObject, you can do various functions on it before you pass it to MarkerOptions. The primary ones I can see are resizing and adjusting the alpha before attaching it your marker. I didn’t see any methods to do this once the marker has been created.

Here’s a snippet of code that does that:

     var dataB:DisplayObject = blastOverlayImage.content; 

    dataB.width = 300;

    dataB.height = 300;

Enjoy!

Playing with the Google Map API for Flex

Just started experimenting with the Google Map API for Flex, and have uncovered a few things. I been able to get a custom marker to display on the map. The difficulty has been adjusting its offset. I am to set the iconOffset value. I can see that the value is set by calling the MarkerOptions, but this value seems to have no effect on the position of the marker. What I was trying to do, was to center the overlay image (a semi-transparent circle) at a Lat/Long. I was able to uncover an undocumented setting for the IconAlignment property. If you set it to 0×11; this will center the image. I should have the example up and running in a few days.

Here is the snippet of code I am playing with:

 

var dataB:DisplayObject = overlayImage.content;

var pOffset:Point = new Point(-40,-40);

var markerA:Marker = new Marker(

       new LatLng(lat, long),

       new MarkerOptions({

       radius:0,

       dragable: “false”,

       icon:dataB,

       iconOffset: pOffset,

       iconAlignment:  0×11,

       hasShadow: false

   })

);

   map.addOverlay(markerA);

Here is the output from markerA.getOptions():

MarkerOptions:

{ strokeStyle: StrokeStyle: { thickness: 2, color: 0, alpha: 1} 

  fillStyle: FillStyle: { color: 16741994, alpha: 1, gradient: null} 

  label: null

  labelFormat: [object TextFormat]

  tooltip: 1 psi range

  radius: 0

  hasShadow: false

  draggable: false

  gravity: 0.8

  icon: radii_png_512818238_19

  iconAlignment: 17

  iconOffset: (x=-40, y=-40) }

I’ve posted it to the Google Maps forum, but thought I would post it here also.