Get in a hot air balloon ride with Google Street View and Maps API

I have wanted to experiment the Google Maps API for a long time. So today I used it to create an animation replaying a hot air balloon trip I did in 2009 in Santa Rosa, California.

Before I got into the balloon, I started the Google MyTracks application on my phone. It records your GPS coordinates and altitude periodically. I used this data, Google Street View and Maps API to create the following animation.

It is fairly easy to start programming with this API. The Google Code Playground was a very useful resource of API examples. You can find the implementation details in the source code of this page. The following summarizes the main points of the implementation. The animation is in a DIV element:

The first thing I do in the script is to obtain a JS reference to this object:

  var mapDiv = document.getElementById("map-canvas");

Then I instantiate the StreetViewPanorama class with some GPS coordinates:

streetViewPanorama = new google.maps.StreetViewPanorama(
    mapDiv, {
        position: new google.maps.LatLng(
            latitude, 
            longitude,  
            pov: { /*pov stands for point of view*/
                heading:20, /*in degrees, relative to the north*/ 
                pitch:0,   
                zoom:4},
            /* hide all controls */  
            addressControl: false,  
            zoomControl: false,  
            scrollwheel: false,  
            panControl: false,  
            linksControl: false
    });

To update the point of view, I call the following method every few milliseconds.

streetViewPanorama.setPov({ heading:20, pitch:0, zoom:4 } );

After the hot air balloon takes off, the animation switches to Google Maps.

  var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(latitude, longitude),
    zoom: 20 ,  
    mapTypeId: google.maps.MapTypeId.SATELLITE,  
    disableDefaultUI: true
  });

To move the map and simulate the balloon movement, I call the following methods with new coordinates:

map.panTo( new google.maps.LatLng(latitude, longitude ));
map.setZoom( newZoom );

The animation is quite shaky. I could actually get a better result using the Google Earth API, but this will be for a later post ;-)