2.3 Creating a Street View

Hello everyone, I am Reggie Dawson. Welcome to the Use the Google Map API course for Tuts+. In this video we will learn to use the JavaScript API to display a Google Street View map. To me the coolest thing about Google Maps is street views. About a year ago I relocated to another state. Although I had been there before, it had been many years since I visited where I wanted to move, but I was determined for a change. Before I moved, I planned the trip there to find a place to live. What I did to scout out prospective properties was to input the address in Google. Most of the time the maps will have a Google street view so that you can check out the whole neighborhood. The house I live in now, I scoped out in advance using Street View. Creating a Street View with JavaScript is just as easy as creating a map. First, let's create a new folder and let's add a index.HTML file. This HTML file is pretty much identical to the one we used in the first example. This time the style for the map ID has been replaced by the street ID. Here we are setting the height and width to 100%. Also in the street ID, we are setting the height and width to 100%. Then we have a div with a street ID attached. Then we have our script reference for app.js and the Google Maps API. Again we have our API key, a callback function in the URL. After that create the app.js file. First we add a variable to hold our map, then we add our initmap function that is our call back from the Google Map API. Then we will add our variable to hold our StreetView. As you will see, setting up the street view is a little bit different than creating a regular map. Then, we captured the div that we have on our index.html page. Then, will add the only required option of the street view, the position. This has to be specified by latitude and longitude. Then we add the POV option. This specifies the compass heading the view is facing and the amount the image is pitched up or down. Positive numbers pitch the view up. Now this next option is for motion tracking control but this will not apply to this street view anyway. That is because this controlled is for mobile devices, and allows you to change the orientation of the street view by moving the device. Then I will add panControl, zoomControl, fullscreenControl, linksControl, and enableCloseButton. I have set all these to false, and I will enable them one by one so that you can see what they do. Then we have the addressControlOption that controls the address overlay that displays on the street view. This sets the position to the bottom center of the screen. Then, finally, we set the street view to the map variable. Go ahead and save your project and preview it. Now you should be looking down a street in downtown Atlanta. In the bottom middle you can see the address of where you are. We can navigate but it's not readily apparent how. Let's add some controls. First we set the pan control to true. That adds a small compass in the bottom right that you click on to rotate the view. Next we will set zoom control to true. Now that we've turned on zoom control we can see the controls to zoom in and out of the view have been added. Then if we set full screen control to true. This displays a control that allows us to set the street view to full screen. Next we'll set the link control to true. Now the link control could be a little confusing in what it does. The street view is really a collection of images stitched together. The link control just lets us move to an adjacent street view. The link controls are these arrows that we can click to move to an adjacent street view. And then finally, we set the enable close button to true. Can you spot what happens when we enable this control? If you notice the address control now has an arrow. If we click on this arrow, it will close this preview. That's enough to get you started using StreetViews, but there is so much more that you can do with them. Make sure to check out the documentation and see what else you can do. In the next video, we will learn how to use directions with the JavaScript API.