Geo (Maps/Earth)‎ > ‎

Maps API V3

Objective/Description:
This codelab will challenge you to become familiar with the various features of the Google Maps Javascript API V3 - 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

Requirements:

Before you begin this codelab you must have the following:

  • Access to a server
  • A basic knowledge of HTML
  • A basic knowledge of JavaScript
Index:

This codelab is divided into the following sections:

  • Preparing
  • Creating an Interactive Campus Map

Section 1: Preparing
  1. If using Mozilla Firefox 2 for this codelab (strongly recommended), download two useful debugging extensions for Firefox: Web Developer Toolbar and Firebug.
  2. If you're unfamiliar with Firebug or the Web Developer toolbar, check out this tutorial for Firebug and this series of screencasts about debugging the Maps API with tools.
Section 2: Creating an Interactive Campus Map
  1. Create a map centered on a university campus (e.g. your alma mater).
    Class Reference: Maps V3
    Developer's Guide: Hello WorldTutorial: Your First Map

  2. Add a map type control and a zoom control to the map.
    Developer's Guide: ControlsTutorial: Control Options

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

  4. Make it so that an info window opens with your university motto when you click on the marker.
    Class Reference: MapsEventListener
    Class Reference: Marker, Class Reference: InfoWindowDeveloper's Guide: Event ListenersDeveloper's Guide: Info Windows

  5. Add a logo of the university mascot to the info window.
    Class Reference: InfoWindow

  6. Find a small logo for your university via google image search, and make it the icon for the marker using GMarkerOptions.
    Class Reference: MarkerDeveloper's Guide: Icons

  7. Make it so that the icon image for the marker changes on mouseover to a different logo using GMarker.setIcon.
    Class Reference: Marker

  8. Draw a polyline on the map from your apartment to one of your classrooms.
    Class Reference: Polyline
    Developer's Guide: Polylines Overview

  9. Add driving directions for your house to your favorite local restaurant on the map.
    Class Reference: Directions
    Developer's Guide: Directions

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

  11. Add a traffic overlay to the map.
    Developer's Guide: Image Overlays


Comments