Codelabs

Getting Started With Maps API V3

Setting Up

Map Basics

Preface

Lab #1: Map Foundation

Steps

Example

Lab #2: Map Customization

Steps

Example

Lab #3: Map Services

Steps

Example

Lab #4: Advanced Topics

Exercises

Getting Started With Maps API V3

This code lab gets you up to speed with the Maps API V3 through a series of simple yet fun exercises.  No previous knowledge experience with mapping APIs are assumed or required.  However, you are expected to be familiar with the following technologies:

Through various exercises, you’ll become more familiar with core Maps API objects which are essential to building an interactive Maps application.

Time: 30 minutes

Reference: Basics, Tutorial, Events, Overlays, API Reference

Topics: Map Object, Map Controls, Overlays, Info windows, Polys, Map events

Format:

  1. Getting Set Up
  2. Map Basics
  1. Create map
  2. Add markers
  3. Add info windows
  4. Add polys
  5. Register event listeners

Setting Up

  1. Maps API is a client-side API which requires nothing but a supported browser capable of rendering HTML and executing JavaScript.  In the exercises below, we recommend either hosting your *.html file on your local drive or hosting it externally.

    Tip: If Python is installed, you can run the following command to mount the current directory onto localhost, e.g. http://localhost:8000:
    $
    python -m SimpleHTTPServer 8000

  1. Choose a browser to develop on.  We recommend either Firefox or Google Chrome.
  1. If choosing Firefox, make sure Firebug is installed to help with debugging/testing.  Check out this Firebug tutorial if you’re unfamiliar with the tool.
  2. If choosing Google Chrome, be sure to check out the introductory tutorial to Chrome Developer Tools.

Map Basics

  1. Create a Map centered on the location of your choice.  Geocoding services aren’t covered in this code lab, but you still use the client-side Geocoder or revert to using this simple geocoding example.
  2. Experiment with different Map options:
  1. Set default map type to display satellite imagery with a transparent layer of major streets.
  2. Set the map type control to a dropdown menu.
  3. Show the scale control by default.
  4. Move navigation controls to the right.  Move map type controls to the left.

  1. Place a Marker at the center of the map, and give it a nifty title.

  1. Make the Marker clickable.  When the Marker is clicked on, open up an Info Window anchored to the Marker, and have it display an image of your choice.

  1. Make it so the Info Window closes when the user clicks anywhere on the Map.

  1. Create a link (outside the Map) which when clicked on, randomly distributes at least 20 Markers onto the map within the bounds of the map viewport.  Each time the link is clicked on, reuse your existing set of Markers to plot the new set of random points.

  1. Create a link to draw a Polyline connecting all the Markers added in Step 5, starting from the first one added to the last.  Hide the Polyline from the map whenever a new set of Markers are generated.  Use only a single Polyline object for this step.
  1. Change the polyline stroke color, opacity, and weight

  1. Repeat Step 7 but with a Polygon.

See our example below:

http://gmaps-samples-v3.googlecode.com/svn/trunk/devfest-au/codelab-basics.html


Preface

The best way to learn an API is to build something cool and useful with it.  This first lab will guide you through getting set up with an initial map containing basic functionality.  With each subsequent code lab, you’ll be guided through incrementally adding more and more features to your application.  By the end, you’ll have built an interesting interactive map application using the JavaScript Maps API V3, providing you with a strong foundation to build other cool apps using it.

At the end of each code lab, we’ll provide a link to our example which you can reference at any time to help follow along.  If you have the time to add more features than what is listed to your demo, please do!  Alternatively, you are free to use our ending examples as the starting point for the next lab segment.  This ensures you’ll always have a starting point to build upon throughout each step.


Lab #1: Map Foundation

Time: 60 minutes

References: Maps API Reference, Twitter API, Flickr API, Picasa Web Albums Data API

Goal: The first lab guides you to create an interactive map displaying geotagged content of your choice while referencing the map bounds to limit results from your search query.  There’s a variety of publicly accessible content to choose from.  A few services we recommend using for the purposes of this code lab which offers free publicly accessible content are: Twitter API, Flickr API, or Picasa Web Albums Data API.

Steps

  1. Start by creating a new Map on a new HTML page.  You have the freedom to configure the default set of Map options, background color, map type, etc.

  1. Create a search function which queries the web service of your choice and returns a JSONP response via callback.  Limit your search query to return results within the current map bounds.  Keep loading time latency reasonable by throttling the number of results returned and plotted on the map per request.

    Here’s an example of a search request using the Twitter API:
    http://search.twitter.com/search.json?callback=foo&q=devfestau&geocode=-33.866834,151.195972,25km

  1. Execute a search for geotagged content on the initial map load.

  1. For each result, plot a single Marker onto the Map against its location.
  1. (optional) Create a local cache for your Markers so they can be reused when displaying the same result.

  1. Register appropriate Marker events to ensure each Marker bubbles up to the top when the user’s mouse scrolls over.  This removes the problem when two or more Markers are plotted on top of each other.  Depending on how many results you’re plotting, this may or may not be a problem but is good practice.

  1. Register ‘click’ listeners against every Marker.  Whenever a user clicks on it, have the event handler open up an info window anchored to the Marker and display more details.  What you choose to display inside the info window will vary depending on the type of content you’re pulling in.  For certain services, this may require sending out an additional request for the specific item.

  1. Register additional event listeners to have your application repeat steps 3-5 whenever the map is dragged, and send out a new search query using the new map bounds.

Example

Using the Flickr API:

http://gmaps-samples-v3.googlecode.com/svn/trunk/devfest-au/codelab-lab1.html


Lab #2: Map Customization

Time: 60 minutes

References: Styled Map Wizard, MapIconMaker, Custom overlays

Topics: Custom controls, Custom overlays, Custom marker icons, Styled maps

Goal: Customize your map application to give it a fresh unique look and feel.  You can customize everything from markers, to overlays, to controls, and even map tiles.  This is where you can really differentiate your map from all the rest.

Steps

  1. Create your own custom styled map type using the Styled Map Wizard.  Try to create a map which optimizes the user experience around visualizing your geotagged content.  For example, you can remove some of the clutter like roads, names, etc.

  1. Set your styled map type the default map type on load.

  1. Assign your styled map type a new map type ID and have it show up in your MapTypeControl list.
  1. (optional) Create a few more custom styled map types, assign them each a unique map type ID, and append them to your Map Type Control list.

  1. Customize your markers.  Try one or both of the two options below:
  1. Normal (MarkerImage): Replace each marker’s standard icon by defining a custom icon of your choice in place of the default.  Check out the Marker Icons section in the developer guide for more insight.  The MapIconMaker from V2 uses Google chart server to create custom marker pin images on the fly.  You can also use these in V3 if you’d like a quick and easy way to generate custom icon images.
  2. Advanced (OverlayView): Instead of using Marker and MarkerImage to plot markers with custom icons, create your own custom overlay marker by using the OverlayView class.  Make sure to read up about custom overlays in our developer guide as a way to get started.

  1. Add a new custom control panel to your map which continually updates to present useful status information to your users.  Some examples of information you could display are:
  1. number of results returned from your search query
  2. current search radius
  3. searching / loading / rendering, status messages

  1. Use the same custom control or add a new one to create additional search filters, fields, and options giving the user greater options around what type of content to search for.  Input controls can be in the form of text fields, radio buttons, drop downs, etc.  What you can enable highly depends on the web service you’re pulling data from.  For example, the Flickr API provides access to control the following:
  1. pagination, e.g. results per page, page number, etc
  2. search term
  3. search tags
  4. min/max date filters

Example

Using native Marker objects with custom icons:

http://gmaps-samples-v3.googlecode.com/svn/trunk/devfest-au/codelab-lab2-easy.html

Using custom overlays:

http://gmaps-samples-v3.googlecode.com/svn/trunk/devfest-au/codelab-lab2.html


Lab #3: Map Services

Time: 60 minutes

References: Street view, Geocoding services, Geolocation API

Topics: User Location, Geocoder, Street View

Goal: Use map services to further enhance the user experience and functionality in your application.

Steps

  1. Allow users to quickly and easily jump to a different part of the world by typing a street, city, country, etc into a text input field.  Do this by placing a new custom control on the map, which contains a single text input field.  When a user types in a location, use the Maps API’s Geocoding service to geocode the physical address into a lat/lng.  Update the Map’s center point to this location.

  1. Add Street view to your map in any of the following ways:
  1. Add a street view link inside the info window to launch Street View in a separate HTML container either displayed somewhere in or outside the map.
  2. Advance: Create a split map, similar to how it’s done to maps.google.com, which allows you to see where street view is available in addition to your current position.

  1. With the help of HTML5’s Geolocation API, find and plot a custom Marker or Overlay at the user’s approximate location.  Read the section in our developer guide about detecting user location for more help.
  1. (optional) Continually update the user’s location by using“watchPosition”.

Example

TBD


Lab #4: Advanced Topics

Time: Take home

References: Fun with MVC Objects

Topics: Binding properties, custom MVC object

Exercises

  1. Make use of MVC where relevant to create better, more readable, clean, and efficient code.
  2. Augment your user location marker from Lab #3 with a circle overlay indicating the accuracy of its location.  Bind the Circle overlay onto the Marker to keep them joined together.