All right. Now that you have a working app, let's
quickly look at the code to see how this was all set up.
In this article I will just describe the basics of how
to have a map up and running with directions displayed.
Like all APIs, the Google Maps API
is an abstraction - it provides a nice interface that
hides the complexities that lie beneath. If you had to
figure out a way to communicate with the Google Maps API
from scratch, you may have to do a lot of tricky,
complicated work. Thanks to this API, the tricky and
complicated work has already been done for you. All you
have to do is just code against the nice interface.
Let's look at the code that you have to write to talk
to this API starting at the very top:
- import
com.google.maps.LatLng;
- import
com.google.maps.Map;
- import
com.google.maps.MapEvent;
- import
com.google.maps.MapType;
- import
com.google.maps.InfoWindowOptions;
- import
com.google.maps.LatLngBounds;
- import
com.google.maps.MapMoveEvent;
- import
com.google.maps.overlays.Marker;
- import
com.google.maps.overlays.MarkerOptions;
- import
com.google.maps.interfaces.IPolyline;
- import
com.google.maps.services.*;
These are import statements that point your code to
the location where the various classes and types you are
using live. Because a lot of the code you are using
requires the Google Maps API, something which Flash
doesn't know anything about by default, you have to
explicitly point the compiler to the API via these
import statements.
- var
dir:Directions;
- var
polyline:IPolyline;
- var
map:Map
There are three variables that I want globally
accessible, so I am just declaring them. These variables
will be initialized in later methods that I describe.
- function
setupMap()
{
- map
=
new
Map();
- map.key="Your
Key Here";
- map.setSize(new
Point(400,400));
- map.x=0;
- map.y=0;
- map.addEventListener(MapEvent.MAP_READY,
onMapReady);
- this.addChild(map);
- }
- setupMap();
The above code defines the setupMap method along with
the method call that actually calls your setupMap
method. The setupMap method does a few things. It
initializes your map variable from earlier, sets your
map's API key, specifies position/size, and sets up the
event handler. The final thing you do is actually add
your map to your application's visual tree. That is
accomplished via the addChild method.
The format for binding your event to an event handler
is consistent with everything you've done in the past.
What may be new to you is the actual event itself. The
Google Maps API declares its own custom event called
MAP_READY that lives in the MapEvent class, and as I
will show next, you will see the onMapReady event
handler get called when the MAP_READY event gets called.
- function
onMapReady(event:Event):void
{
- dir
=
new
Directions();
- dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS,onDirectionsLoaded);
- dir.load("645
Carlton Road, Markham, ON to Fawnbrook Circle,
Markham, ON");
- }
The onMapReady method is, as I showed a few seconds
ago, is the event handler for the the MAP_READY event.
When your map is ready, this event handler will get
called, and this event handler is responsible for
setting off the events that cause things to be drawn on
your recently-made ready map.
I initialize the dir variable to a new Directions
object, add another event handler to let me know when my
direction is ready, and actually specify the addresses I
want to find directions to. In other words, when the
directions I specify as arguments to my dir object's
load method get sent to the server and successfully
returned, the onDirLoad gets called. Let's look at this
onDirLoad method in greater detail next.
- function
onDirectionsLoaded(event:DirectionsEvent):void
{
- var
returnedDirection:Directions=event.directions;
-
- var
startLatLng:LatLng=returnedDirection.getRoute(0).getStep(0).latLng;
- var
endLatLng:LatLng=returnedDirection.getRoute(returnedDirection.numRoutes-1).endLatLng;
-
- polyline=returnedDirection.createPolyline();
-
- // Remove everything
from map and add back the markers and polyline
- map.clearOverlays();
- map.addOverlay(polyline);
- map.addOverlay(new
Marker(startLatLng));
- map.addOverlay(new
Marker(endLatLng));
- map.setCenter(returnedDirection.bounds.getCenter(),
map.getBoundsZoomLevel(returnedDirection.bounds));
- }
The final method we will look at is the
onDirectionsLoaded method that gets called when the
server returns the direction data for the addresses you
specified earlier.
This code is specific to the Google Maps API, so I am
not going to be describing all of this in greater
detail. What this code does is pretty straightforward.
What you first do is get the latitudinal and
longitudinal coordinates of your start and end point.
This is responsible for setting your starting and ending
points.
Once you have these points, you need to generate the
path between them. Unfortunately, this isn't like
drawing a straight or curved line between two points :P
The path that gets generated is actually a series of
lines that snakes through various roads and
intersections to get you between two points. The
createPolyLine method found in your Directions object
gets you exactly that - a series of lines that, when put
together, create the lines between the two points.
The final step once all of the data has been
calculated is to actually display them on your map. That
is handled elegantly by the following five lines:
- // Remove everything from
map and add back the markers and polyline
- map.clearOverlays();
- map.addOverlay(polyline);
- map.addOverlay(new
Marker(startLatLng));
- map.addOverlay(new
Marker(endLatLng));
- map.setCenter(returnedDirection.bounds.getCenter(),
map.getBoundsZoomLevel(returnedDirection.bounds));
Let's run through this code quickly. First, clear
anything on your map that you may not want to see. After
that, add the overlays for your directions, starting
point, and ending point. You have one more thing
remaining before you can call it a day.
Your map's initial size is determined by two things.
It is determined by your map's center point and the
boundaries of the points that make up your starting
point, ending point, and the path between them. Your map
object's setCenter object takes those three inputs into
account, does some magic, and sets up your map's center
and zoom positions for you.
I hope
this tutorial helped give you a leg up on using the
Google Maps API to create a simple application. There is
a lot more you can do, and this tutorial just scratched
the surface of what is possible.
If you have any questions, please feel free to post
on the
forums, and I or others will help you out.
Cheers!
|
Gaurav Pandey |