Geo (Maps/Earth)‎ > ‎

Maps Flash API

Objective
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

Prerequisites
Before you begin this codelab you must have a basic knowledge of AS3/Flash


Codelab

  1. Create a map centered on a university campus (e.g. your alma mater).

    Class Reference:Map, Flex Builder Tutorial,  Flex SDK Tutorial 

  2. Add a map type control and a zoom control to the map.

    Class Reference: Map.addControlDeveloper's Guide: Adding Controls to the Map

  3. Add a marker at the map center.
    Class Reference: MarkerDeveloper's Guide: Markers

  4. Make it so that an info window opens with your university motto when you click on the marker.
    Class Reference: MapMouseEvent
    Class Reference: MarkerDeveloper's Guide: Event Listeners 

  5. Add a logo of the university mascot to the info window.

  6. 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 

  7. Add driving directions for your house to your favorite local restaurant on the map.

    Class Reference: DirectionsDeveloper's Guide: Driving Directions

  8. Add an input box above the map that the user can use to geocode themself with.

  9. 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

  10. Make it so that an info window opens up with a name and description whenever one of those markers is clicked.

  11. Create a polyline that goes through each marker. Apply a BlurFilter to the polyline.
    Class Reference: Polyline
    Developer's Guide: Polylines Overview 

  12. Report the length of that polyline under the map.
    Class Reference: Polyline

  13. Add a 3D Persepective to the Map:
    Developer Guide: 3D Maps, Class Reference: Maps3D

  14. Create an AIR version of your app:
    Developer Guide: AIR
Subpages (1): Maps Data API
Comments