How to use Google Maps Street View

This is my fourth tutorial covering features of the Google Maps API v3. This time I will show you how to use the street view service. I have built an app for this tutorial, an interactive visit of Paris. You’ll be able to visit certain locations, walk through Paris or take virtual tours.

What google maps features are covered in the tutorial?

Prerequisites

The application is built using html, php and javascript. It would be best if you had some basic knowledge of these.

What are we going to build?

We’re going to build an interactive visit of Paris. The visit starts in front of the Eiffel tower. To continue, a user can walk through the city, go directly to certain locations highlighted on the map, or take a tour of the islands (Ile de la Cite and Ile Saint Louis).

You can view the app here! And also download the source code from here.

Creating the layout for our app

We’ll use a simple layout. We’ll show a title and some info about our app at the top of the page. Below that we’ll add three columns, one for the Paris map, one for the street view and one for steps from the islands tour.

Here’s how the code looks like:

<body>
   <div id="title" style="width:100%; height:5%;">
      <h1><center>Paris Visit</center></h1>
   </div>
   <div id="details" style="width:100%; height:130px;">
      Your virtual travel visit starts near the tour Eiffel. To continue the visit you have the following options:
      <ul>
         <li/>Move directly from the street view
         <li/>Move the pegman on the map to choose a location - some ideas are already marked
         <li>Take a tour: &nbsp;<input value="take islands tour" onclick="visitIslands();"/></li>
      </ul>
   </div>
   <div id="map_canvas1" style="width: 450px; height: 500px; float: left;"></div>
   <div id="space" style="width=10px; height: 500px; float: left;">&nbsp;</div>
   <div id="map_canvas2" style="width: 500px; height: 500px; float: left;">use the pegman to choose location to visit</div>
   <div id="directions" style="height: 500px; float: right;"></div>
</body>

The map_canvas1 div will be used to hold the map, the map_canvas2 div is for the streetview and the directions div is for the showing the steps in the tour. As you noticed, the initialize function is called after loading the page, the function will show the map and street view. Let’s see how it looks like.

Showing the map and streetview

We will first have to include the google maps api, like so:

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

The initialize function looks like this:

// the function called when the page loads; it shows the map and street view
function initialize()
{
   // coordinates for the center of the map
   var mapCenter = new google.maps.LatLng(48.85893528,2.2933412);
   // options for the map
   var mapOptions = {
      center: mapCenter,
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: true
   };
   // create a new map object to be shown in the map_canvas1 div elements and with the options that were set
   map = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);

   // options for the panorama
   panoramaOptions = {
      addressControl: true,
      addressControlOptions: {
         style: {backgroundColor: 'grey', color: 'yellow'}
      },
      position: mapCenter,
      pov: {
         heading: 140,
         pitch: +10,
         zoom: 1
      }
   };
   // show the panorama in the map_canvas2 div element with the options that were set
   panorama = new  google.maps.StreetViewPanorama(document.getElementById("map_canvas2"), panoramaOptions);
   // set street view for map
   map.setStreetView(panorama);
// add marker for tour eiffel
     // on map
   var marker = new google.maps.Marker({
      position: mapCenter,
      map: map,
      title:"Paris visit starts here!"
   });
   google.maps.event.addListener(marker, 'click', function() {
      panorama.setPosition(mapCenter);
      panorama.setPov({heading: 140, pitch: +10, zoom: 1});
   });
      // on panorama
   var markerPanorama = new google.maps.Marker({
      position: mapCenter,
      map: panorama,
      title: 'Tour Eiffel'
   });
   // add notre dame marker
     // on map
   var positionNotreDame = new google.maps.LatLng(48.853499,2.348090);
   var markerNotreDame = new google.maps.Marker({
      position: positionNotreDame,
      map: map,
      title:"Notre Dame Cathedral"
   });
   // add listener to change panorama options when the marker is clicked
   google.maps.event.addListener(markerNotreDame, 'click', function() {
      panorama.setPosition(positionNotreDame);
      panorama.setPov({heading: 140, pitch: +10, zoom: 1});
   });
      // on panorama
   var markerNotreDamePanorama = new google.maps.Marker({
      position: positionNotreDame,
      map: panorama,
      title: 'Notre Dame Cathedral'
   });
   // add louvre marker
      // on map
   var positionLouvre = new google.maps.LatLng(48.862266,2.336728);
   var markerLouvre = new google.maps.Marker({
      position: positionLouvre,
      map: map,
      title:"Louvre Museum"
   });
   // add listener to change panorama options when the marker is clicked
   google.maps.event.addListener(markerLouvre, 'click', function() {
      panorama.setPosition(positionLouvre);
      panorama.setPov({heading: 230, pitch: +10, zoom: 1});
   });
      // on panorama
   var markerLouvrePanorama = new google.maps.Marker({
      position: positionLouvre,
      map: panorama,
      title: 'Louvre Museum'
   });
}

We first defined the coordinates for the center of the map (we centered the map near the Eiffel tower). We also set the options for the map:

var mapOptions = {
   center: mapCenter,
   zoom: 12,
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   streetViewControl: true
};

We have set the map center, zoom level, type and we have set the streetViewControl to true. This means a small pegman will be shown on the left of the map. By dragging it on different places on the map we can change the view in the streetview.

All we have to do now in order to show the map is create a new map object.

map = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);

For showing the street view next to the map, we have to follow similar steps. We first have to set the options for the panorama:

// options for the panorama
panoramaOptions = {
   addressControl: true,
   addressControlOptions: {
      style: {backgroundColor: 'grey', color: 'yellow'}
   },
   position: mapCenter,
   pov: {
      heading: 140,
      pitch: +10,
      zoom: 1
   }
};

The addresscontrol is a small box that shows the address of the viewed location. We have set the background color and text color for it. We have defined the position of the panorama (same as the map center). And we have defined the point of view for the panorama. For the point of view, we can define the heading (the rotation angle of the camera locus), pitch (the angle variance “up” or “down”) and zoom (zoom level of the view).

After setting the parameters, we have to create a new streetviewpanorama object and set the streetview of the map. Like this:

// show the panorama in the map_canvas2 div element with the options that were set
panorama = new  google.maps.StreetViewPanorama(document.getElementById("map_canvas2"), panoramaOptions);

// set street view for map
map.setStreetView(panorama);

We will also add some markers for a few places to visit. We will add markers on the map and on the streetview (yes, we can place markers on them). Here’s the code for showing a marker (for the tour Eiffel marker; the others are the same, just the location is set to some other coordinates):

// add marker for tour eiffel
   // on map
var marker = new google.maps.Marker({
   position: mapCenter,
   map: map,
   title:"Paris visit starts here!"
});
   // on panorama
var markerPanorama = new google.maps.Marker({
   position: mapCenter,
   map: panorama,
   title: 'Tour Eiffel'
});

For each marker we have set the position, the map where is appears and a title.
There’s one more thing we need to do. We want the streetview to change when a user clicks on a marker on the map. For this, we have to add an event for when a user clicks on a marker and change the position and point of view of the panorama then.

google.maps.event.addListener(marker, 'click', function() {
   panorama.setPosition(mapCenter);
   panorama.setPov({heading: 140, pitch: +10, zoom: 1});
});

I chose the values for the point of view in order for the panorama to focus on the building to visit.

So we now have a map of Paris and a street view panorama. The virtual visitors can use the pegman on the map to change the streetview and visit different sites. They can also move using the streetview panorama and “walk” through Paris. To view certain locations, they can use the markers we placed on the map. The only thing we have to add to our app is the tour of the islands. Here’s how it will work: when the user presses on the “take tour” button, the tour is shown on the map, the panorama is centered on the start point of the tour (in front on the Notre Dame cathedral) and the steps of the tour are shown in the right panel. To take the tour, the user has to click on the steps in the right. When they click, the panorama will change and show the current location. To show the steps we will use the directions service.

Here’s the function that is called when the “take tour” button is pressed:

// function called when the island visit button is pressed;
function visitIslands()
{
   // centers the map on the island and zooms it
   var newMapCenter = new google.maps.LatLng(48.853372,2.350718);
   map.setCenter(newMapCenter);
   map.setZoom(14);

   // add some points for the tour
   var route1 = new google.maps.LatLng(48.853499,2.348090);//notre dame
   var route2 = new google.maps.LatLng(48.854191,2.347457);
   var route3 = new google.maps.LatLng(48.855659,2.348272);
   var route4 = new google.maps.LatLng(48.856916,2.343434);
   var route5 = new google.maps.LatLng(48.854370,2.344935);
   var route6 = new google.maps.LatLng(48.852799,2.353309);
   var route7 = new google.maps.LatLng(48.850647,2.357531);
   var route8 = new google.maps.LatLng(48.851875,2.358626);
   var route9 = new google.maps.LatLng(48.855038,2.350171);
// set the position for the street view - the first point in the tour
   panorama.setPosition(route1);
// create DirectionsService object
   directionsService = new google.maps.DirectionsService();
   // set options for renderer
   var rendererOptions = {
      map: map
   };
   // create DirectionsRenderer object for showing the route directions
   directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
// the request for the directionsservice
   var request = {
     origin: route1,           // tour start
     destination: route9, // tour end
     waypoints: [             // waypoints: adding the points for the tour
     {
       location: route2,
       stopover: false
     },{
       location: route3,
       stopover: false
     },{
       location: route4,
       stopover: false
     },{
       location: route5,
       stopover: false
     },{
       location: route6,
       stopover: false
     },{
       location: route7,
       stopover: false
     },{
       location: route8,
       stopover: false
     }],
     provideRouteAlternatives: false,     // don't look for alternative routes
     travelMode: google.maps.DirectionsTravelMode.WALKING // travel mode set to walking
   };

   // make request to directions service
   directionsService.route(request, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK)
      {
        // display the route on the map
        directionsDisplay.setDirections(result);
        // get routes array
        var myRoute = result.routes[0];
        // create the text to show in the right panel
        var text = "<center>Islands Tour<br/><b>Notre Dame Cathedral -> Quai aux Fleurs</b></center>";
        text += "<br/>Instructions:<br/>";
        text += "<br/>Click on the instructions to view panorama!<br/>";
        // find the instructions for the route and show then in the right panel
        for (var i=0; i<myRoute.legs[0].steps.length; i++)
        {
           // show them as links, when they are clicked call the movePan function (parameter latitude and longitude for the start of the step)
           text += "<br/><a style='cursor: pointer;' onclick='movePan("+myRoute.legs[0].steps[i].start_location.lat()+","+myRoute.legs[0].steps[i].start_location.lng()+")'>"+myRoute.legs[0].steps[i].instructions+"</a>";
        }
        // show the text on the page
        document.getElementById('directions').innerHTML = text;
     }
   });
}

Let’s see what it does. First, we center the map on the islands and zoom the map. Then, we define some points on the tour route. We also set the position of the panorama to the start point. And now, we’ll use the directions service to find the route.

We create the directionsservice object and a renderer to display the route on the map.

// create DirectionsService object
directionsService = new google.maps.DirectionsService();
// set options for renderer
var rendererOptions = {
   map: map
};
// create DirectionsRenderer object for showing the route directions
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

Then we create a request for the directions service. We set the origin and destination of the desired route. We also set the other points we defined for the route as waypoints (the route returned by the directions service from google will have to pass through these waypoints). We instruct the service to not look for alternative routes and use the walking travel mode.

// the request for the directionsservice
var request = {
   origin: route1,           // tour start
   destination: route9, // tour end
   waypoints: [             // waypoints: adding the points for the tour
   {
     location: route2,
     stopover: false
   },{
     location: route3,
     stopover: false
   },{
     location: route4,
     stopover: false
   },{
     location: route5,
     stopover: false
   },{
     location: route6,
     stopover: false
   },{
     location: route7,
     stopover: false
   },{
     location: route8,
     stopover: false
   }],
   provideRouteAlternatives: false,     // don't look for alternative routes
   travelMode: google.maps.DirectionsTravelMode.WALKING // travel mode set to walking
};

We now have to make the request to the service and, when the result is received show the route on the map and the steps in the panel in the right.

// make request to directions service
directionsService.route(request, function(result, status) {
   if (status == google.maps.DirectionsStatus.OK)
   {
      // display the route on the map
      directionsDisplay.setDirections(result);
      // get routes array
      var myRoute = result.routes[0];
      // create the text to show in the right panel
      var text = "<center>Islands Tour<br/><b>Notre Dame Cathedral -> Quai aux Fleurs</b></center>";
      text += "<br/>Instructions:<br/>";
      text += "<br/>Click on the instructions to view panorama!<br/>";
      // find the instructions for the route and show then in the right panel
      for (var i=0; i<myRoute.legs[0].steps.length; i++)
      {
         // show them as links, when they are clicked call the movePan function (parameter latitude and longitude for the start of the step)
         text += "<br/><a style='cursor: pointer;' onclick='movePan("+myRoute.legs[0].steps[i].start_location.lat()+","+myRoute.legs[0].steps[i].start_location.lng()+")'>"+myRoute.legs[0].steps[i].instructions+"</a>";
      }
      // show the text on the page
      document.getElementById('directions').innerHTML = text;
   }
});

We have used the display renderer to show the route on the map. We also got the instruction for each step of the route and shown them in the right panel. As you can see, the movePan function is called when the steps are clicked on. The function takes the coordinates of the step as parameters.

// called when the links with the tour directions are clicked
function movePan(lat, lng)
{
   // modify the position of the street view panorama
   panorama.setPosition(new google.maps.LatLng(lat, lng));
}

The only thing it does is set the position for the panorama.

And we’re done! We now know how to include streetviews in our apps!

If you have any questions or comments, don’t hesitate to ask!

Irina Borozan

Irina is a software developer from Bucharest, Romania. She enjoys working on various programming projects. She likes spending her spare time reading, hiking, travelling, skating or playing tennis. She also blogs a bit. You can find her online in her home on the internet and on twitter.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. maggiey says

    I want to show the location of Australia, but don’t know what should I make change in the code? please suggest how I can show my custom location?

  2. ian says

    Totally frustrated. the map works but no streetview is displayed in my page.

    Driving me nuts!!!!

  3. giorgi says

    if street view data are not available the div of street view is visible however with a background grey
    exist a mode to disable street view if it is not available in a point of map^
    thanks

  4. Sharry says

    Hi, thanks for your tutorial. Is there any way to get the zoom level of the current street view? I can set it ok using your code above & get the map.getZoom() function but not the panorama.getZoom().

    Thanks again.

    Sharry

  5. tina says

    I have a question. Can you use the StreetView functions and visualization indepentent from the map? I mean, in this case use only de second canvas?

  6. Surotayubxj220 says

    its great , with application Google maps play an important role in Today’s Business life..By uploading our address on google our customer can find us easily….

  7. Rahul says

    i’m not that good with this language, still i know i will have to get some knowledge ,this was clear honestly ,so thank You :)

  8. Andrew says

    Yes…Google maps play an important role in Today’s Business life..By uploading our address on google our customer can find us easily…….