Skip to content

Popcorn.js – Google Maps StreetView

February 8, 2011

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);


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.


From → school

  1. Hi David,

    I came across your post via a P2PU course I’m participating in on popcorn.js Your blog was referenced for a description of how to use Streetview in popcorn maps functionality. I’m one of the participants for whom Javascript is a new language and I’m still just at the beginner stage…I’ve read your post and tried to implement it in a trial but I’m clearly doing something wrong. I wonder if you posted any examples of this code in action and a backend view of what what the code looks like in a functioning example? Thanks in advance for any info you can share.


  2. Hey Deiren,

    Thats awesome that my blog can be of some sort of help to you! Sorry I never put up an example of any of the code I was working on, I’ll throw togethor a post right now with some code examples and a working demo of it in action. Give me like 30 minutes to put it all togethor.



  3. HI David,

    Thanks so much – that’s amazing. Look forward to your post. Greatly appreciated.


  4. Hey Deiren,

    Here is the post I made,, let me know if there is still anything unclear. If you are still having issues, feel free to link me to what you are working on, or give me an example, and I will try and help.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: