Flash Google Map

We need to prepare two things:
1. Get google map API key.
2. Download google map component for flash

I assume you already know how to install the googlemap flash component and create predefined map marker. Otherwise, please refer to this tutorial to get a basic understanding. The main focus of this poster is to do the run-time searching in flash file. There are two main tasks for us to achieve this goal:

1. How to get to coordinates recognized by flash component basing on user input
2. How to move the point in the map.

let’s get this solved one by one;

1. Get to coordinates recognized by flash component basing on user input

google provide a geocoding service-side script to get the coordinates basing on the input;

To access the Maps API Geocoder, send a request to http://maps.google.com/maps/geo? with the following parameters in the URI:

* q (required) — The address that you want to geocode.
* key (required) — Your API key.
* output (required) — The format in which the output should be generated. The options are xml, kml, csv, or (default) json.
* ll (optional) — The {latitude,longitude} of the viewport center expressed as a comma-separated string (e.g. “ll=40.479581,-117.773438” ). This parameter only has meaning if the spn parameter is also passed to the geocoder.
* spn (optional) — The “span” of the viewport expressed as a comma-separated string of {latitude,longitude} (e.g. “spn=11.1873,22.5” ). This parameter only has meaning if the ll parameter is also passed to the geocoder.
* gl (optional) — The country code, specified as a ccTLD (“top-level domain”) two-character value.

Note: The gl and spn,ll viewport parameters will only influence, not fully restrict, results from the geocoder.

So what you need to do is to call the script and add user’s input in the q and you API key in the key. To get idea of what this call will return you, try to call this one in your browser “http://maps.google.com/maps/geo?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA&output=xml&key=abcdefg”

You will see a xml page, in this page, the content of coordinates node is what we need;
<Point>
-122.0841430,37.4219720,0
</Point>
The first number “-122.0841430” represents Longitude and the second number “37.4219720” represent Latitude;

Besides xml, return can be different format like: kml, csv, or (default) json. You can try to see the different effect when you change “output=xml” in above link to any format you want, like “output=csv”

There are two things need to be noticed;

1. all the content in the q need to be URL encoding. (in flash, call the script escape(content) );
2. Since flash is client-side application. Unless your site is allowed in google’s crossdomain file, you cannot call the script directly from your swf on your web page. That is due to flash’s security setting, to get more information about it, see my another poster “Flash Security Sandbox“. My approach is to write a php script (kind of script can run in on server-side), using it to call google’s script and put the php script in the same folder with my swf. Now, my flash call php and php call google script to get info then return to flash. Two server-side script communicates won’t cause cross-domain issue.

===========================================================================

2.To move the point in the map.
From my experience, the current component doesn’t support you addPoint in map at runtime. What we can do is to update the coordinates of current point.

In my example, there is a point call pointA, it is a predefined point in my map. When I successfully get the coordinates, I just need to
pointA.lng=lanNum;(Longitude number you got)
pointA.lat=latNum; (Latitude number you got)
Then setting you new points be the center of the map:
map.setCenter({lat:latNum, lng:lanNum});

Then we can use search function in flash google map.

Click Here to download the source file (including fla and php)