Labs (All)‎ > ‎

Using the Google Maps API for Flash

Goal

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

  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.
  4. Class Reference: MarkerDeveloper's Guide: Markers

  5. Make it so that an info window opens with your university motto when you click on the marker.

    Class Reference: MapMouseEventClass Reference: MarkerDeveloper's Guide: Event Listeners

  6. Add a logo of the university mascot to the info window.
  7. Find a small logo for your university via google image search, and make it the icon for the marker.

    Class Reference: MarkerOptionsDemo Gallery: Icon

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

    Class Reference: DirectionsDeveloper's Guide: Driving Directions

  9. Add an input box above the map that the user can use to geocode themself with.
  10. 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.
  11. Developer's Guide: XML and Data Parsing

  12. Make it so that an info window opens up with a name and description whenever one of those markers is clicked.
  13. Create a polyline that goes through each marker. Apply a BlurFilter to the polyline.

    Class Reference: PolylineDeveloper's Guide: Polylines Overview

  14. Report the length of that polyline under the map.

              Class Reference: Polyline

Comments