Codelab: Using the Google Maps Javascript API

Goal

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

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 HTML
• A basic knowledge of JavaScript

Index

This codelab is divided into the following sections:

• Preparing
• Creating an Interactive Campus Map

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.

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

   Class Reference:GMap2, Developer's Guide: Hello World, Tutorial: Your First Map

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

   Class Reference: GMap2, Developer's Guide: Adding Controls to the Map

3. Add a traffic overlay to the map.

   Class Reference: GTrafficOverlay, Developer's Guide: Traffic Overlays

4. Add a marker at the map center.

   Class Reference: GMarker, Developer's Guide: Markers

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

   Class Reference: GEvent, Class Reference: GMarker, Developer's Guide: Event Listeners, Tutorial: Your First Map

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 using GMarkerOptions.

   Class Reference: GMarkerOptions, Developer's Guide: Icons

8. Make it so that the icon image for the marker changes on mouseover to a different logo using GMarker.setImage.

   Class Reference: GMarker

9. Create a "My Map" of a few of your favorite local restaurants on google maps, then overlay it on your map using GGeoXml and the KML output.

   Class Reference: GGeoXml, Developer's Guide: KML/GeoRSS Overlays

10. Draw a polyline on the map from your apartment to one of your classrooms.

    Class Reference: GPolyline, Developer's Guide: Polylines Overview

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

    Class Reference: GDirections, Developer's Guide: Driving Directions

12. Create an XML file that contains at least 3 placemarks (with name, description, and latitude/longitude information). Use GDownloadUrl to read the XML file into your page, and then display a marker for each one.

    Class Reference: GDownloadUrl, Developer's Guide: XML and Data Parsing

13. Make it so that an info window opens up with a name and description whenever one of those markers is clicked.
14. Create a GPolyline that goes through each marker.

    Class Reference: GPolyline

15. Report the length of that polyline under the map using GPolyline.getLength.

    Class Reference: GPolyline