Google Maps API - Preparing for AM3

Overview

In AM3, we will create a mashup of Google Maps API with another API of your choice, or a source of geo-encoded data. Google Maps API is the most used API on the web (and also the oldest one built with mashups and asynchrounus loading in mind). Google Maps just celebrated 10 years.

To prepare for AM3, we will need to learn to work with the Google Maps API. Fortunately, this API has very good documentation, given its use. Your first task will be to go over the tutorials described below and create a first Google Maps page to show some of the locations relevant to your life. Below is how such a page might look like. Of course, the more you'll learn (especially about markers with icons and info windows), the more sophisticated this example can be.

screenshot of google maps page

Your Tasks

  1. Your will start with this initial tutorial on Google Maps to create your first map page. Instead of putting your Javascript code in the HTML page, create a JS file and have all your JS code there. However, the script tag with the URL to the API will remain in the HTML page.
  2. In this second tutorial, only read the section about basic map types. Play with the types to find dthe right one for you.
  3. In this tutorial about markers read the first 2-3 sections. Feel free to read more, but you'll not need them right away.
  4. If your places are far apart, you can use the object LatLngBounds to store your coordinates (by using the method .extend and then using the method .fitBounds of the map object to make the map change to display all your places at one glance.

Now that you learned how to put Google Maps on a web page and add markers to specific locations, create a page like the one above, but using your own locations. You can find the lat/long coordinates of almost every city or town on its Wikipedia page, by clicking on Coordinates to find the decimal representation.

You can find the lat/long in the Wikipedia page, then click on the field Coordinates.

Once you have created such a page, please do the following:

  1. Add the page to the AM3 folder in your account, with the filename myplaces.html (and respective names for the JS and CSS files).
  2. Make a screenshot of your page and post it on your Tubmlr blog, together with a small reflection on how easy/difficult was to create the page, what difficulties you encountered, and how you overcame them.

Contribution Tasks

If you finish this task quickly and want to learn more, consider creating a tutorial for your class peers (similar in style/content to the Facebook API tutorial). Choose a topic that you think is relevant to projects with Google Maps and show step by step how to do something. Here are some ideas:

  • How to show icons instead of the default markers?
  • How to display info windows with images and text?
  • How to draw lines on the map?
  • How to automatically find the locations of places using the Google Maps GeoLocation API?
  • How to show walking directions (or other directions)?
  • How to use Indoor Google Maps?

If you decide to do one of these topics, send an email to the group so that you don't duplicate efforts. Create an HTML/CSS/JS page for your tutorial and send me the link. Links will be posted to this page, so that the class can access them from one place.