STA 04 – Google Maps

Google Maps & GIS

This week we’re learning about visualizations, including graphs & maps. It seemed fitting to try out a simple exercise with one very complex geographical information system: Google Maps.

We’re all familiar with Google Maps, but how much do you know about how they work? Consider how complex your interactions with the map are:

  • Google has data for the whole world, but when the map is presented to you, it displays only a small fraction of that information
  • you can drag & zoom the map at will with the mouse – note how different this is from the normal interaction with HTML.=
  • by clicking on a button you can display road or satellite data, and google can compile directions for you
  • common landmarks are displayed, and in some cases there is further information attached to those landmarks

Google Maps, then, is a Geographical Information System: a complexly-layered dataset presented to the user in a visual form. There are many ways to understand GIS – as database, as map, as mathematical object – but one key aspect is layering. In a GIS, different types of geographical features are stored in “layers” which can be drawn on or removed from the screen independently of each other. The Google “hybrid” view perhaps makes this most clear: street map data and satellite data are layered on top of each other, making a rich but sometimes confusing display. Switch to satellite or road map view and one of those layer will be removed from view, making a cleaner (but less informative) map. Map markers and other elements – such as the complex polygons (‘overlays’) you may sometimes seen drawn on top of regions, or the provincial and national borders that decorate the globe when seen at a distant zoom level – exist in their own layers. When you access a Google map, these features are turned on or off according to your preferences and/or the nature of your query to the mapping software. And there are layers you never see – such as the lowest level grid that all the other data are painted on top of.

The internal workings of this system are complex and to some degree secret. The maps themselves are built from a hodgepodge of different sources – public domain government maps in the US, various proprietary map datasets in other parts of the world, and Google’s own, self- and user-generated datasets. Complex smoothing algorithms generate the shapes and colours we see in any individual map.

But, amazingly, we can use this srvice – and even build our own maps – without knowing anything about the underlying software. In fact, though we won’t be doing this ourselves, it is possible to write a single piece of code that can draw maps using Google’s service, the Yahoo mapping service, or a variety of other lesser-known services. This is because all of these services provide “Application Programming Interfaces” (API‘s): simplified programming interfaces that allow external programs to access the sophisticated machinery behind the scenes.

The historical GIS systems described in Placing History offer more sophisticated and complex possibilities, but none are as easily accessible to the novice as Google Maps. In this exercise you will build a simple Google Map from a template already provided for you. The object here is not to create a really sophisticated historial GIS project, but to understand how Google assembles a particular map from diverse datasets. You’ll do this by first inspecting the template I’ve created, and then modifying it to your own purposes. Spend time studying the

The Template

HTML + CSS + JS = the modern web

I’ve built the template in JSBin, which you will remember from earlier in the semester. like most web pages, it is composed of three parts: HTML, CSS, and Javascript. To give you a sense of thework that is done by each part, I’ve made three JSBin projects:

  • HTML only. This is what the page would look like if the CSS and Javascript were missing. Note how very simple the structure is.Please inspect the code & be sure you understand it.
  • HTML + CSS. All the dynamic content is missing, but at least some formatting has begun to be apparent. Hide all the code panes to be sure you understand what the page really looks like; then look carefully at the CSS to see how it’s done. Fool around with it a little bit to get familiar with this part.
  • The Whole Works. (if it doesn’t work at first, try reloading – JSBin can be a little touchy.) This is the whole template. Take a look at it, and try to read through the Javascript. You may not understand everything, but feel free to fool around with the code a little bit. If it gets wrecked up, just click on this link to reload my version.

Understanding the Javascript

Our script relies on two external libraries:

  1. the Google Maps javascript API
  2. the “tabletop.js” library, which allows our script to use data stored in a Google spreadsheet. Tabletop is a kind of shortcut, which lets us avoid the tedious practice of hand-coding all of our marker data; it also lets us imitate the way data travels on the real web: freely from computer to computer. So we’re combining data from Google Maps with programs on Google servers, all rendered on JSBin’s servers.

The short script you see in the JS pane has to do the following:

  • define the map object and its components
  • read all the spreadsheet data
  • turn each row of the spreadsheet into a marker
  • create a “listener” for each marker, which will pop up an “info window” when you click on the marker.

First steps

To get started, be sure you are logged in to JSBin. Then clone the template (JSBin –> Clone ). This will help you keep track of your work. Go ahead and “create a milestone”; by doing so you can be sure that you’re always able to go back to a pristine state.

  • in function “initialize”, find the mapTypeId. Change this to “SATELLITE”. Note the effect.
  • change the value of “my_center”. What happens?
  • change the value of “window_content” in the definition of this_marker. What is the effect?
  • if you know how to access the browser console (Ctrl-Shift-K in Firefox, Ctrl-shift-J in chrome), activate it and navigate to the “live preview” by clicking on the arrow in the top right corner of the Output pane. Then, in the console, type “my_markers” and hit enter. What do you see?
  • now type

and then

my_markers[0].marker.setTitle("Here's a new title");
  • hit the up arrow twice to repeat your first command. Notice the difference? Try mousing over the markers till you find the one whose title you just changed.
  • If you got through all of this, try one last thing.

The first command shows you the internal structure of the “listener” associated with the first marker. It’s complicated! The second command runs a function that is part of the listener object – and this function removes the listener! If you try clicking on the event, you’ll see that the window doesn’t appear anymore. All of this shows how you can manipulate the marker objects from outside the map – and this is in fact also what the buttons near the top of the page do.

Learn more

At this point you might want to take a break and read some documentation. Start with the tutorial, and if you make it through that, consider the reference manual. There are many, many resources on the web to help you understand more.

Build your own Map

Finally we get to the real assignment! You’re going to write a very short history of one of the following local history topics:

  • Classical Music in Toronto
  • Gay Toronto in the 1970’s
  • Toronto in the Great Depression
  • Toronto’s first Chinatown
  • The Labour Movement in Toronto
  • really anything else you want, as we’ll discuss in class

add your short essay to the HTML pane

Don’t bother with footnotes or other apparatus. This is just to make you do a little handcoding of HTML and remind you what it looks like.

Create our own Google spreadsheet

Those of you in His389 will remember how to do this:

  • navigate to the spreadsheet template.
  • under the File menu, choose “Publish to the Web” and then “Start Publishing”.
  • in the top right corner, under ‘Share’, add “anyone with a link”.
  • make a note of the ‘key’ – the part of the URL that comes between “key=” and “#gid=0″
  • return to your JSBin project, and replace the existing my_spreadsheet_key with the new value

Edit Markers

Check to see that your project still works. If not, there is probably something wrong with your spreadsheet setup (either your spreadsheet hasn’t been published to the web, or you renamed the sheet, or you entered the wrong key…). If it’s working, you can now edit the markers. Each time you reload your project, or make changes to the javascript pane, your markers should be refreshed.

Here are a couple of things to think about:

  • you may want to put some pretty long text in “description”, and even some links or images. You can include any HTML code you want, except for <script> tags.
  • You may notice that the last three columns (lat/lon, latitude, and longitude), are automagically generated from the address field. Cool, right? I did that. If you add more events than are already there (not necessary), you will probably want to copy the formulas for those columns into your new cells. If you don’t know how to do that already… you should learn! If you don’t have an address for the location, you can find the latitude and longitude online and enter them manually. But that’s a lot more work…

Try to add 8 or 10 markers to your project. Then you’ll have a real map of the topic! When you’re done, be sure to share the URL for your project on the class blog, so everyone can see your work.

Sound fun? We’ll talk more about it in class.

Leave a Reply