Using Google Maps Inside of Flash CS3: Part 2

In Using Google Maps Inside of Flash CS3: Part 1 we built a Google Map running in Flash CS3. But our goal is to make a full store locator. Here in Part 2, we’re going to need a database of locations, a way of asking that database for a list of locations near a zip code or address a user enters in, and we’ll need to display those locations on our map we created. Let’s get going.

Your server set up

We’ll need a server with PHP and MySQL for this exercise. Of course there are other server and database technologies, but most basic hosting packages have these.

Setting up your database, the full Google version

We’ll be using MySQL for the database. On the Google Maps API project site, Google has a very good tutorial for how to set up the type of table we’ll need. Their tutorial is written for building a map using PHP, not Flash, but the first 2 steps are identical to what we need to do. I suggest reading Creating the Table and Populating the Table from their tutorial for a detailed explanation of what to do because I’ll only cover this part quickly.

Setting up your database, no frills version

If you skipped Google’s tutorial, here’s a short version of what to do. You’ll need a MySQL database. If you’re able to manage that database with MyPHPAdmin this is pretty easy. You’ll need a table, we’ll call ours markers, with 5 rows. The five rows are id, name, address, lat, lng. The id row is your primary key. Here’s the SQL code to make this table.

CREATE TABLE 'markers' (
  'id' INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
  'name' VARCHAR( 60 ) NOT NULL ,
  'address' VARCHAR( 80 ) NOT NULL ,
  'lat' FLOAT( 10, 6 ) NOT NULL ,
  'lng' FLOAT( 10, 6 ) NOT NULL
) ENGINE = MYISAM ;

Once you’ve got your table, you need to fill it with some data that we’ll use for testing. You can fill your database with this SQL file or this CVS file from Google’s tutorial I mentioned above.

Accessing your MySQL from Flash

(Warning: many acroynms ahead.) We’ll use AMFPHP to access. What’s that? First, AMF is short for Action Message Format, which is the protocol Flash uses to exchange data with a database. Second, PHP is the server techology, the software, mentioned above running on your server which happens to communicate easily with our MySQL database. AMFPHP is a free, open-source project that lets AMF work with PHP. That means that AMFPHP is the software that lets our Flash file talk to PHP easily.

Let’s get the AMFPHP software from the project site, http://www.amfphp.org/. Click the downloads link at the top of that page. At the time I’m writing this amfphp 1.9 beta2 is the most current version of the software. You’ll need to use at least this version because it works with ActionScript 3.

Installing AMFPHP

Installing AMFPHP is easy. Seriously. You basically just copy the ‘amfphp’ folder to your server. Boom! That’s it.

If you want to learn about AMFPHP, I highly recommend Lee Brimelow’s 2 excellent tutorials on the subject here and here.

Now that’s it’s on your server, you’ll need to locate the file ‘gateway.php’. Enter that URL into your web browser. It will look something like this:

http://yourdomainhere.com/amfphp/gateway.php

Test it out and you should get some sort of confirmation that it’s working properly. That URL to your gateway.php file is important because we’ll be using that in our Flash file, so keep it handy.

The services folder in amfphp

Writing your AMFPHP service to get locations from your database

In a text editor, like TextMate or BBEdit on a Mac or Notepade on Windows, create a new file called “GetLoc.php”.

You’ll need to save it in the “services” folder inside your amfphp directory on your server. (You can see a screenshot of the location on the right.)

Below is the full source code that goes in this file. There are several things that will need to be updated before it will work for your set up though. I’ll describe that after.

<?php
class GetLoc
{
    function GetLoc()
    {
        // update mysql_connect and mysql_select_db with your information
        // the mydatabase.supergeekery.com may be 'localhost' in many circumstances
        mysql_connect('mydatabase.supergeekery.com', 'myusername', 'mypassword');
        mysql_select_db('mydatabasename');       
    }
       
    /**
    * Retrieves lat and lng of a location
    * @returns list of locations within the given radius of the lat and lng
    */
   
    function getLocation($lat, $lng)
    {
        //  The radius is how big of a circle we'll be searching within. This could have been a variable set through the getLocation function along with $lng and $lat if you wanted
        $radius = 25;
        // Search the rows in the markers table; be sure to update the name of the table below from markers to what you've named your table
        $query = sprintf("SELECT address, name, lat, lng, ( 3959 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance < '%s' ORDER BY distance LIMIT 0 , 40",
          mysql_real_escape_string($lat),
          mysql_real_escape_string($lng),
          mysql_real_escape_string($lat),
          mysql_real_escape_string($radius));
        $result = mysql_query($query);

        if (!$result) {
          die("Invalid query: " . mysql_error());
        }
        return $result;
    }
}
?>

Personalizing the code for your application

If you named the file “GetLoc.php” you should be fine, but incase you changed it, there’s another bit you need to change inside the code as well. Look for “GetLoc” in 2 locations near the beginning and change “GetLoc” to be the same as the filename you chose in both places. You’ll also need to customize the code to work with your database settings. Look for the “mysql_connect” line. Here you will need to put the connection information for your database. The next line of code, “mysql_select_db”, is where you put the name of the database you built your table in. If you didn’t name the table you created “markers”, you will also need to update this code with the table name you chose as well. It’s in the middle of the code, but may be hard to see so I suggest doing a “find” for it.

Is it working?

Once you’ve updated the code to work on your server set up, you can see if it’s going to work in your Flash application using the Services Browser built into AMFPHP. This browser is located within the AMFPHP folder on your server. If you test this file locally and not through a hosting environment, it won’t work because the PHP code won’t execute unless it is run through a server. I’ve set up a test version below for you to check out. Click “GetLoc” in the left hand column and you should see 2 text fields appear on the right hand side. To see if it’s working, enter a longitude and latitude that is near locations in the data in your database. For testing purposes, try 41 latitude and -74 longitude. After your query returns some data, you can see the result by clicking the Record Set tab that appears at the bottom of the page.

http://jmx2.com/supergeekery/amfphp/browser/

If you can make this work on your server, you’re in good shape. I’m using a different set of data than you’re using if you tried Google’s test data. My data displays store locations where you can buy Rachel’s Yogurt since this project originated in the building of a store locator for them. You can see it here. Next time, in Part 3, we’ll update the Flash file we made in Part 1 to talk to the database connection we’ve built here in Part 2. 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.

Thanks for these articles!  I was tearing my hair out trying to figure out how to get started with my maps based project before running across your site - its been a godsend! cant wait for the next part http://supergeekery.com/images/smileys/smile.gif

COMMENT:
Thanks, Stuart. I really appreciate hearing that.

COMMENT:
I have compiled an SWC file that wraps the Google Maps Flash API that can be used in the Flash CS3 authoring environment.

COMMENT:
Hey ‘team’,

I think it’s quite an accomplishment that you’ve been able to to do that on your own. It’s a valuable skill.

In regards to a Google Maps SWC though, now Google is doing it for developer’s now. Check out http://maps.googleapis.com/maps/flash/release/sdk.zip for the latest SWC that they’ve been distributing that works within the Flash authoring environment.

By John Morton on Feb 15 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.