Code Like a Googler

Well, not really.  But, you can fool around with some of the hooks into Google products using the Google Code Playground.

The web application gives you access to numerous Google APIs  (Application Program Interface).  So often we, and our students, see just the best products as an end user.  It’s the curiosity of a programmer that wants to lift the hood and see what’s inside.  The Code Playground is the perfect place to do this.

You can look at Language, Blogger, Blog Search, Maps, Earth, Web Search, YouTube, … and take a look at the code designed to generate a particular output.

So, if you want to play around with Google Search, you would expand the options for an application and choose your poison!

The API Choice appears in the top left window, code to tinker with/modify in the top right, and the actual output at the bottom of the screen.

As I was poking around, I got interested in Maps.  In particular, map markers.  So I dug in and looked at the screen.

It might make a great deal of sense if you lived in Palo Alto but I don’t.  Now, I always work better when I have a particular project and my inspiration on this date was Bubbypalooza.  It’s my daughter’s birthday and we decided to take the dog on a daughter/daddy outing to Arby’s and then the lake at Seacliffe Park in Leamington.  During the course of the outing, we made a number of stops so that was my inspiration to take the original example and rework it for my purposes.

Now, if you’re a regular Maps user, you know that the front end is very easy and intuitive to use.  (At least the old Google Maps was…)

My starting point was to look at their map and tie my logic into the code that they supplied.

It looks like they had to choose the base map for their canvas and then they just picked 10 random spots and dropped markers in place.

My learning started – how do I determine the base map and then scale to the size I need?  Then, how are points created and plotted – I certainly don’t want random points?  As an aside, my original project was going to be to plot the path that we took getting in and around Leamington due to the construction but I decided to do something easier!  Just figuring out the Oak, Fraser, Talbot Intersection is enough!

The clues were all stored in the car’s GPS.  I revisited our trip and used the latitude/longitude information to get me close to where we were.  Had I known I was going to do this yesterday, I would have kept a log of our trip.  Choosing the starting map was relatively simple since the town of Essex is almost dead centre in Essex County.  I experimented with the third argument and decided a zoom level of 9 gave me the view of the map that I wanted.  My “got it” moment was displaying Google’s 10 random points over a map of Essex County.  I removed their code and added my own – brute force style.

function initialize() {

 if (GBrowserIsCompatible()) {

    var map = new GMap2(document.getElementById(“map_canvas”));

    map.setCenter(new GLatLng(42.156787,-82.777519), 9);

    // The Great Bubbypalooza Road Trip


      var point = new GLatLng(42.036544, -82.739518);

      map.addOverlay(new GMarker(point));

      //Seacliffe Park

      var point = new GLatLng(42.032464, -82.605622);

      map.addOverlay(new GMarker(point));


      var point = new GLatLng(42.171546, -82.815735);

      map.addOverlay(new GMarker(point));


      var point = new GLatLng(42.135022,-82.87917);

      map.addOverlay(new GMarker(point));


      var point = new GLatLng(42.140241, -82.970322);

      map.addOverlay(new GMarker(point));



The result?  This beautiful map!

Like every successful coding project, I’m happy and also thinking of next steps.

  • How would I label the markers?
  • Could I draw the roads and path that we took?  (except for the Leamington detours)
  • Could I measure the distance between waypoints?

For the classroom, it’s a wonderful example of tinkering and playing to get results.  It’s just another example that helps answer the question “Where will we ever use this stuff?”  It certainly does gives you a look under the hood of Google Maps.

And, most of all, it’s a great deal of fun.  With all that can be accessed in the Code Playground, you’ll never get your fill!


OTR Links 08/24/2013

Posted from Diigo. The rest of my favorite links are here.