Using Google Maps Inside of Flash CS3: Part 1

Google has released a beta version of the Google Maps API for Flash. Including “for Flash” in the name might be a little misleading though if you’re a Flash developer who uses Adobe Flash CS3, aka the Flash IDE, to build web sites. The Google Maps API for Flash in its current state doesn’t work with Flash. It works with Flex only, a situation the project page promises will be corrected at some point in the future.

Although it’s not officially available, I recently completed a project built with the Flash IDE, a landing page for Rachel’s Yogurt, which included a store locator using the Google Maps API for Flash and wanted to share how I did it with you in case you need to do a similar thing. (That project, going to Flash Forward, plus a few other ‘life events’ have made SuperGeekery a little quiet the past month. Sorry about that. I’m glad you’re here now though.)

Download the example file

You can see what we’re going to build at http://jmx2.com/supergeekery/sg_map_example_part1.php. You’ll notice I’m actually hosting this on my company’s web site, jmx2.com. I’m not trying to promote my company by doing that. SuperGeekery.com uses an SSL certificate, meaning communication to and from the server is encrypted. Google Maps does not currently work on an SSL connection. Bummer, but now we both know that.

You can also download the example FLA file that I built this with here.

Using a Flex SWC in Flash

Google makes a Flex-only SWC for Google Maps. A SWC is a self-contained clip files that contain all of the necessary classes and symbols for a component. If you don’t have a Flex-only compatible component, how do you use that component in Flash? Vincent Tsao, whom I met through the Google Group for Google Maps API for Flash, has written a tutorial for turning a Flex SWC into a Flash SWC. If that sounds like too much work, luckily he’s even uploaded the resulting Flash component itself in the files section of this group.

As I write this, the most current version of the file is called “map_flash_1_6.swc”. On a Mac, put this file Components folder. (Adobe Flash CS3 > Configuration > Components > map_flash_1_6.swc)

Where to put the SWC

(Another member of the group, yuletide, has further packaged that file as an MXP file which means you just double click the files to install it.)

Tutorial from the source

If you’re using Flex, Google has made a nice tutorial already and you might want to check it out. It’s probably helpful even if you’re developing in Flash, now that you’ve got the SWC for Flash.

http://code.google.com/apis/maps/documentation/flash/basics.html

I didn’t teach myself this stuff, you know. grin

Getting your API key

If you followed that tutorial, you’ve got a map of New York sitting on your desktop. Hey, it’s a good place, right? We’re building a store locator here so we’re but we’ve got to play catch up to Google tutorial, but this time in the Flash IDE instead of Flex.

First, let’s go get your API key. This key gives you access to Google’s map services. It’s unique to the domain the map will be running on. You can’t build a Google Map without one. Visit http://code.google.com/apis/maps/signup.html to get your own for free.

You’ll need to accept the terms of service (you read those, right?) and enter in the domain your map will live on. Your domain key will look something like this:

ABQIAAAA9PsGxVdAFpL4jqpj3Fm9_RQ7Cg5a6Nk8RDsADCME6UX3PNKbDhQqDVFRN30UVYHtzZYw0123456789

Keep that in a easy place to access.

Let’s make some Flash

Now let’s open Flash and begin a new document and save it somewhere. I’ve made mine 445x445 pixels. The frame rate doesn’t matter. This must also be at least a Flash 9 document using ActionScript 3.

Our Flash movie is going to be one frame long so we’ll be putting all of our code on the first frame of the Flash file.

Now let’s import the most basic class files that you’ll need from Google to build a map, Map, MapEvent, MapType, and LatLng. This lets us build a map, listen for events from the Map (like “I’m finished with making the map you asked for now”), tell the map whether it’s a street map or satellite map or hybrid map, and a way for us to tell is locations.

import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.LatLng;

Let’s also include our first bonus class, the controls that let us zoom in and out of a Google map.

import com.google.maps.controls.ZoomControl;

If you test your movie now, nothing happens that you can actually see on screen. Hopefully you didn’t get any errors though. That’s what we’re looking for. No errors.

Defining variables in your Flash movie

Now that we’ve got the classes we need in our Flash movie, let’s define the variables that we’ll be using. The first variable will hold the API key you got at the beginning. I’ll call mine supergeekeryGoogleMapID. We’ll also need to create a variable to hold the Map object. Let’s get creative and call it “map”. Lastly, let’s make a movieclip that we can put the map into, call it mapHolder. We could have just added the “map” directly to the stage, but putting it inside a movieclip will let us move it around the stage later.

const supergeekeryGoogleMapID:String ="ABQIAAAA9PsGxVdAFpL4jqpj3Fm9_RTsKU3fgQ_HaG9jz2gMHOQJMixmKxR-YwnWKsrmBk_zB5H1G15d8JSn5w";
var map:Map;var mapHolder:MovieClip = new MovieClip();

While we’re here, let’s also add the mapHolder to the stage at the top left of the stage so it’s waiting for us when we’re ready to go.

mapHolder.x = 0;
mapHolder.y = 0;
addChild(mapHolder);

Functions to make the Map - part 1

This is the core of the building the map. We’re going to need 2 functions. Let’s start with the first fuction. The first function, startSuperGeekeryMap(), actually starts the process of making the map.

We take the creatively named “map” variable and make an instance of the Google Map object inside it. We give it the key that will allow us access to Google Map engine and use the function “setSize”, which is built into Google’s Map object, to set the size of the map. (Notice we didn’t set the size of the map with the mapHolder movieclip.) Placing the map on the stage simple. Use “addChild” to place the “map” inside our MapHolder.

function startSuperGeekeryMap():void {
 map = new Map();
 map.key = supergeekeryGoogleMapID;
 map.setSize(new Point(445, 445));
 mapHolder.addChild(map);
 map.addEventListener(MapEvent.MAP_READY, onMapReady);
}

Technically, once you execute this function you’ve got your map. What you don’t have yet though is any control over the location that’s being shown on your map or any map controls though. You can see an example of what I mean here, http://jmx2.com/supergeekery/sg_map_example_part1a.php.

We need to be able to define what we’re showing. That’s what we’ll do in the second function. But we don’t want to execute that function on a map that isn’t actually present, so we need to wait for the map we’re building to finish before we can give it any new instructions. To do that, we add a listener inside the first function right after the “addChild” line. This piece of code will tell the “map” object to listen for the event “my map is ready” and then execute our second function which we’ll call “onMapReady”.

map.addEventListener(MapEvent.MAP_READY, onMapReady);

Functions to make the Map - part 2

In our “onMapReady” function, the first thing to do is to tell the map object that it doesn’t need to listen for the “MAP_READY” event anymore, so we remove that event listener.

The next couple things to do in this function is to make the map more user-friendly. The “enableScrollWheelZoom” makes the scroll wheel on your mouse zoom the map in and out. This seems to work only on Windows though and the Flash file needs to have focus on the page for it to work. The “enableContinuousZoom” function makes your map feel more Flashy by making zooming more fluid.

Next we finally get to define what we’re showing on the map with the “setCenter” function. Here we can provide a longitude and latitude to define the center point of our map. We can also define what the zoom level will be on our location we’re providing. I’ve put in 3 for our zoom which is pretty far out. Some in the 14-15 range is more neighborhood level. Finally, in this same function, we can provide a parameter that tells our map what type of map data to display, I’ve used NORMAL_MAP_TYPE, but you could try SATELLITE_MAP_TYPE to see how it changes what your map looks like.

To finish this second function, we’ll add the zoom controls everyone is familiar with on Google Maps using the “addControl” function.

function onMapReady(event:Event):void {
 map.removeEventListener(MapEvent.MAP_READY, onMapReady);
 map.enableScrollWheelZoom();
 map.enableContinuousZoom();
 map.setCenter(new LatLng(39.12345, -94.12345), 3, MapType.NORMAL_MAP_TYPE);
 map.addControl(new ZoomControl());
}

One last thing

If you tested your movie, you’re probably disappointed that you’ve still got a blank screen. The reason why is that we haven’t actually told Flash to start the process of building our map. This one’s easy though. We just need to call the startSuperGeekeryMap function that we defined above to get the ball, er… map, rolling.

startSuperGeekeryMap();

Your map should now look like mine.

In part 2, we’ll get our map to act more like a real store locator. We’ll use AMFPHP to access a MySQL database to retrieve locations and put markers on our map. Fun stuff!

Update: I’ve now posted all 3 tutorials for this series on SuperGeekery plus an update about Google releasing the component with official support for the Flash IDE:

Here are the links for all parts: Part 1, Part 2, Part 3, and the Update Post.

Comments on this post.

Nice to see you’re staying on brand http://supergeekery.com/images/smileys/grin.gif

I understood none of this but the Rachel’s Yogurt site is nice.

COMMENT:
I’d love to see an example of displaying driving directions to a fixed location, all from within Flash (not Flex). Perhaps collection of data through normal Flash CS3 components, and then drawing the overlay appropriately on the loaded map with step by step directions in a text box.

COMMENT:
Thanks for the comment, Paul. I see there’s a Flex version of what you’re asking for on Google’s site: http://gmaps-samples-flash.googlecode.com/svn/trunk/demos/DrivingDirectionsInputDemo/DrivingDirectionsInput.html

The source code is there, but in Flex: http://gmaps-samples-flash.googlecode.com/svn/trunk/demos/DrivingDirectionsInputDemo/srcview/index.html

In part 2 of this tutorial (which at this time isn’t posted because I’m still working on it), you’ll start to see how similar the Flex code and Flash CS3 code is. The main differences are that translating all the top bits of the Flex code (i.e. all the “mx” stuff) into the Flash way of thinking, which can be simply placing data components on your stage with an instance name.

COMMENT:
Thanks a ton phew finally got it working the way i wanted it to.

COMMENT:
Hey team building,

Nice. Congrats on getting it working. If you’d like, post a link of your project when you’re ready. I’d love to see what you’ve done.

-John

COMMENT:
This is truly a great read for me!! I love the quality information and news your blog provides http://supergeekery.com/images/smileys/smile.gif I have you bookmarked to show this to my brother!

Thanks,

COMMENT:
Your tutorial is great, but how you got it to work is beyond me.

I copied your text directly and nothing.  I get a ton of errors when finsihed, they are compiler errors.

and no map displays.

Maybe you could look at my as code?

Thanks

COMMENT:
Hi Jasen,

Did you download my completed FLA files too? Did those compile with errors too?

Were you able to get the Google Maps component installed properly?

COMMENT:
Jasen,

One last thing…

Google has officially released the component so it’s easier to install and it’s more googly-official.

I wrote an update post about it here:

http://supergeekery.com/index.php/geekblog/comments/using_google_maps_inside_of_flash_cs3_official_update_and_cs4_suport/

I will add an update to the body of the article as well here.

COMMENT:
thanks man.. this helped me a lot. please come up with more..

COMMENT:
I am back at it, I will be using your tutorial for a huge project that has a very very tight deadline.

You have been very helpful in the past with this

so I hope that we can make this a successful venture.

thanks for putting this knowledege online and making it free for those of us who have not exactly grasped it all yet.

-Yhwh Design

By Jasen on Feb 07 2009

Leave Your Comment:

name:

email:

location:

url:

your comment:

Remember my personal information

Notify me of follow-up comments?

Twitter Feed

John Morton talking on Twitter




Meanwhile on Instagram… //

My latest shot from Instagram.
Hazy night in Union Square