##(Google Maps) API Workshop Exercises

###What It Is

The goal of this workshop is to gently introduce APIs via the Google Maps API. These are the exercise files that accompany the workshop.

###Pre-reqs (In Order of Importance)

• Object-oriented programming (CS 61A): quick review
• JavaScript: quick start
• Know what a callback is
• Basic knowledge of HTML and CSS: quick review
• Google Maps API v3 key

###Usage

Get these files however you like: clone this repo or click the "Download Zip" button to the right. We'll work through these exercise together.

###Google Maps JavaScript API v3 Reference

• When using a constructor, follow this pattern (don't forget the google.maps at the beginning):

    var center = new google.maps.LatLng(SODA_LAT, SODA_LONG);
  

• If a constructor is not given in the documentation, set the properties using the JavaScript object literal:

    var mapOptions = {
      center: center,
      zoom: 8
    };
  

• If you get stuck, ask for help!

###Exercises and Relevant Documentation

1. Hello Map: A simple map centered on our second home. (JSFiddle)
   • LatLng
   • MapOptions
   • Map
2. (Geo)Coder: A tool for discovering the latitude and longitude of addresses. (JSFiddle)
   • Geocoder
   • GeocoderRequest
   • GeocoderResult
   • Marker
3. Listen for the Click (Events): An introduction to event listeners. (JSFiddle)
   • event
   • (The Events section of) Map
4. Stylin' On 'Em: Paint the globe blue and gold. You mad? (JSFiddle)
   • MapTypeStyler
   • MapTypeStyle
   • StyledMapTypeOptions
   • StyledMapType
   • (The Properties section of) Map
   • MapTypeRegistry
5. Hello Neighbors: Mark some of our fellow bay area universities. (JSFiddle)
   • MarkerShape
   • Size
   • Icon
6. What's the Weather Like?: A tool for checking the weather. (JSFiddle)
   • Libraries
   • WeatherLayer
   • CloudLayer
7. Directions: Google Maps Super Lite. (JSFiddle)
   • DirectionsService
   • DirectionsRendererOptions
   • DirectionsRenderer
   • DirectionsRequest
8. Take it to the Streets (Street View): A side-by-side comparison of overhead and street views. (JSFiddle)
   • StreetViewPov
   • StreetViewPanoramaOptions
   • StreetViewPanorama