This codelab will challenge you to become familiar with the various features of the Google Maps API for Flash- from basics like markers to more advanced topics like driving directions - while learning to use various sections of the documentation. At the end of this codelab, you'll have a full interactive map.
Time to Complete
Approximately 90 minutes
Before you begin this codelab you must have the following:
- Access to a server (or a free hosting service like Google Pages)
- A basic knowledge of AS3/Flash
Creating an Interactive Campus Map
- Create a map centered on a university campus (e.g. your alma mater).
Class Reference:Map, Flex Builder Tutorial, Flex SDK Tutorial
- Add a map type control and a zoom control to the map.
Class Reference: Map.addControl, Developer's Guide: Adding Controls to the Map
- Add a marker at the map center.
Class Reference: Marker, Developer's Guide: Markers
- Make it so that an info window opens with your university motto when you click on the marker.
Class Reference: MapMouseEvent, Class Reference: Marker, Developer's Guide: Event Listeners
- Add a logo of the university mascot to the info window.
- Find a small logo for your university via google image search, and make it the icon for the marker.
Class Reference: MarkerOptions, Demo Gallery: Icon
- Add driving directions for your house to your favorite local restaurant on the map.
Class Reference: Directions, Developer's Guide: Driving Directions
- Add an input box above the map that the user can use to geocode themself with.
- Create an XML file that contains at least 3 placemarks (with name, description, and latitude/longitude information). Read the XML file into your page, and then display a marker for each one.
Developer's Guide: XML and Data Parsing
- Make it so that an info window opens up with a name and description whenever one of those markers is clicked.
- Create a polyline that goes through each marker. Apply a BlurFilter to the polyline.
Class Reference: Polyline, Developer's Guide: Polylines Overview
- Report the length of that polyline under the map.
Class Reference: Polyline