Popcorn.js - Google Maps StreetView

After being a bit timid about starting on my popcorn.js, I finally mustered up the courage to take a stab at it.  The bug I chose for popcorn.js was adding the google maps street view functionality.  At first I started screwing around with the already existing implementation of google maps in popcorn.  I found out that even through the google maps API you can pick up the pegman (little orange man on google maps) and palce him on the map and it will turn your view into street view (if that location supports it).  I figured that maybe this was all they wanted and maybe wasnt offered in googles API when they originally implemented it.  So I hopped on IRC and asked if that was the case, which is wasn't.  They wanted it so you could type in STREETVIEW as a map type and streetview would be shown for that location.  After fooling around with the demo for google maps in ppopcorn.js I figured I was ready to give it a shot.


As of right now, you can create a Google Maps map in popcorn by doing the following:

start: 0, // seconds
end: 20, // seconds
type: 'ROADMAP',
target: 'map',
lat: 43.665429,
long: -79.403323,
zoom: "1"

specifying details on vital parameters in order to create a map at your desired location.  For the 'type' parameter, I needed implement a solution so typing in 'STREETVIEW' would allow a streetview map to be shown at the desired location.  After going over the documentation of the Google Maps API that was posted in the bug (here) I understood that I needed to create an object that stored information on the position for the map, and another object within that object that stored the point of view information.  For the point of view object, there needed to be a heading which determined the orientation of the camera in degrees relative to true north (being 0 degrees, (90 would be true east on so on)), a pitch which determined the vertical orientation of the camera, and a zoom parameter which is self explanatory.  After creating the objects, I created a variable to store the information of a new Google Maps variable.  This new Google Maps variable received the street view object I created before as one of its parameters.  After this I passed the variable I just created as a parameter to a setStreetView function that is parameter of the map that was originally created early in the code.  This is what it looked like in the end:

if(options.type === 'STREETVIEW'){
var streetViewOptions = {
position: options.location,
pov: {
heading: options.heading,
pitch: options.pitch,
zoom: options.zoom
} }; var streetView = new  google.maps.StreetViewPanorama(options.
newdiv, streetViewOptions);
} options._map.setStreetView(streetView);


There was a bit of stuff that I did, like adding pitch and heading to the options that are a user has when creating a map using popcorn.  I don't know if what I did was ok or not, or if its the most efficient way to approach what I did, but I'm sure ill find that out after I create a patch and put it up for review.