FREELessons: 19Length: 1.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.1 Street View Panoramas

Street View is one of the more powerful features of Google Maps. In this lesson you’ll learn how to create a street view container and link it to your Google Map. You’ll also explore customizing the point of view of the loaded street view.

Related Links

5.1 Street View Panoramas

Google as a whole arsenal services for SC use and tandem with our Map. And one of them is the Street View service. We can project our Map's location to a street view. So next to our Map, we can have the street view being shown of the location in our Map. So imagine in our map if we had an element at the top of the map, that showed us what currently was in street view. Well to do that we're going to need a div on top of the map. Now we can either just push this map down by having a div with a relative position, or we can overlay it with a div with an absolute position. And we're gonna with a div with an absolute position cuz we're gonna show how you can overlay elements on a map. So create a div and we'll give it the ID of pip-pano. And that stands for picture-in-picture. Because having the street view panorama at the top of the page is a bit like a picture in picture. So now in our style.css, we'll set the style for our pip pano. We'll give it a height of 200 pixels and a width of 100%. And we can see that it bumps down our map, so to change that we'll add the position to absolute. And we'll make sure to give it the top of zero and the left of zero as well. And to have a better idea of what it's going to look like, we'll give it a background for now. And our background isn't showing up, and that's because we need to set a z index. And now we can see our pit pano div. So we don't need to have that background, so we'll get rid of that. Now we'll focus on setting up the panorama with the JavaScript API. So within our library we'll create a method and we'll call it set pano. And set pano will take an element as well as options. And the element will be what we're projecting the panorama to. So to create a panorama, we'll create a variable for it. And just like we've done before with creating objects, we'll create a new google.maps.panorama. And this panorama takes in the elements, as well as the options. So in our jQuery UI widget, we'll set up a function for set pano. And rather than passing through the elements of the set pano in the map, we'll just pass through a selector. And, then using jQuery, we'll get that element. And passing through the jQuery object won't work, so we need to use the array notation to get the HTML element. And this will actually only work for one HTML element since we're just grabbing the array of zero. So if we want it to work with multiple, we'll have to iterate through the selector. So we'll use jQuery's each to iterate through the set of elements. So for each of the elements we'll fire off this callback function and then we'll set the pano to the elements. And one thing that sticks out to me right now, is the use of this in this callback function. So to ensure that it's our library, let's create the self variable. And now I'll set it to So now I'll go back to Mapster, and we'll need to change it to Street View Panorama. So now on Script JS, we'll call the set Pano function. We'll pass through the pip Pano ID, and then a blank object. So we can see we have the Street View right here, but we haven't set the location of the Street View. So street view takes in a position object and that takes a lat and a long. So we'll just copy this lat and long up here. And now you can see that we have the street view set. However there's no definitive link between these two components. We want to be able to move the peg man on this map and have it move on the panorama. So back in our Mapster library, we can set the link by calling a method on our map, and that's set street view. And we can set that to the panorama. So now you can see when have his pegman and if we move him somewhere random, it will change it in this panorama right here. So now, we've set the length between our street view and our Google map, but our panorama isn't set up to fire off any events. Fortunately, we've written the attachEvents function. So, we can call this ._attachEvents. We can pass through the panorama and then we can pass through However, we only want to fire this off if there's events. So let's go back into our script js, and let's set some events. So the first event we can fire off is if the position is changed. And if the position changed will alert changed. So we get changed right off the bat and if we move on the street we also get the changed box. So one common feature that people want to do with the Street View, is set the Street View to a certain point of view. So when it loads down, it loads to an angle like this, rather than the default angle that's straight ahead. For example, let's put in this different lat and long. Right now we just see this dirt hill. But if we turn it all the way around, we can see the Golden Gate Bridge. And that's a much better point of view than what we saw with that dirt hill. So when we load this map we wanna see this image. Rather than the default one. So to change that, we can customize the options with the POV object and that stands for" point of view". And the POV object has two properties, heading and pitch. And as you can see if you don't have the heading and pitch properties, it won't show Street View at all. So, don't include POV as a property if you're not going to set the heading and the pitch. So heading and pitch are both based off of 360 degree values. And heading controls whether the street view image goes left or right. So if we set it to 100, it'll go 100 degrees to the right. And with pitch if we set it to 50 it'll go 50 degrees up. And we set it to negative 50 it'll go 50 degrees down. So even if you set this to 360 degrees, you would be exactly where you started. So let's move the heading 200 degrees to the right. And we see the Golden Gate bridge. So remember to use the point of view property when you're trying to set where your street view is located. And there's even an event we can set from the point of view, and that's called POV changed. And for POV changed, I'm gonna log changed the console rather than alerting it, because it will show a lot of boxes if I alert it. So I'm gonna move this up and now I'm gonna check it in the console. And we can see that we had changed alert many times in the console. So there's still a lot of custom events you can fire off for the panorama specifically. You can even fire off when the street is changed. And a street in the panorama is referred to as a link. So we'll change it from POV changed to links changed. And the links will change when we change roads. And you'll get multiple links back when you're at an intersection. So we need to pass through back the event arguments and then the actual panorama itself. Because if you remember in the callback we passed back the object that we're setting the events on. And in this case, it's extremely helpful because we wouldn't have access to the panorama otherwise. So in the links change, we can call panorama.getlength and this will return all the current lengths. And we'll make sure this is get links. So now we'll take this guy and we'll drag him onto another spot of the map. And this will change what road he's on, thus changing the links. And we can see that we have this array of objects returned. And we open up, we can see that get 40th avenue, because that's the road that we're currently on. So Google Maps provides us a way to project Street View from one map to another div. And from there we can set the heading and the pitch from the Street View as well which controls where the Street View is being seen from. And we also can fire off events from Street View as well.

Back to the top