Add Google Maps Street Views To Your Apps

Posted on April 6, 2008. Filed under: Google Maps |

Many Google Maps developers have been eagerly awaiting the inclusion of objects for controlling Street Views from the Google Maps API, and last week it became official!  A handful of new objects including GStreetviewPanorama, GStreetviewOverlay, GStreetviewClient, and GStreetviewLocation among others have been added to the Google Maps API that allow developers to include these Flash enabled street visualizations. 

What is StreetView?
For those of you who are not familiar with Google Maps Street View let me do a quick review.  In certain large metropolitan areas of the U.S. you can view and navigate within Google Maps via street-level imagery.  You’ll notice that when you go to the main Google Maps page a new button called Street View has been added to the display.

Clicking the Street View button will display a Camera for each city that has the capability of displaying Street Views.  You can click on an individual camera to zoom to your city of interest.

Streets that are capable of displaying a Street View will be outlined in blue and you will also see a human icon that can be used to display a Street View.  You can simply drag the icon onto the street you’d like to display or simply click on a street with your mouse.

This street-level imagery is provided through a Flash plugin so you should make sure that you have installed the latest version of Flash for your browser.  You’ll notice that a number of navigation and display controls are embedded in the Street View. 

Navigating the streets
Each street is labeled and contains arrows indicating direction.  You can click these arrows to navigate further in that direction. 

There are a number of methods that you can use to control zooming in and out on the image.  Double-clicking the image, using your mouse wheel, or using the zoom control can all be used to zoom in on the image.  Once you’ve zoomed in a ‘Zoom Out’ button will then be provided or you can use the mouse wheel or zoom control to move back out on the image. 

Panning is accomplished either by dragging the image in the direction in which you’d like to pan or by clicking the pan buttons.  You can even tilt the image to see the sky or ground by dragging the mouse up or down. 

You can also use the arrow keys on your keyboard to control navigation along the street and to pan the image display.

New Classes in the Google Maps API
Let’s do a quick overview of the new classes for controlling Street View that have been added to the Google Maps API. 

GStreetviewPanorama – Holds an instance of the Flash® Street View Panorama viewer.  Normally embedded within a container object such as <div> and can be manipulated through its methods.

GStreetviewPanoramaOptions – Represents options that can be passed to the GStreetviewPanorama constructor.

GStreetviewOverlay – Tileset highlighting locations where Street View data is available.

 GStreetviewClient – Performs searches for Street View data based on parameters passed to its method.

GStreetviewData – Represents the data associated with a panorama.

GStreetviewLocation – Represents a street view location.

GStreetviewLink – Represents a link from one GStreetviewLocation to a neighboring GStreetviewLocation.

GPov – Repreesents the structure of a camera point of view used by street view.

A Simple Example
I’m going to do a series of posts that show you how to use these classes in your Google Maps application.  In this post we’ll start with a simple example.  Click here to see our first example and you can display the code for this example by right clicking the page and selecting View Source.  If you’ll click the right pan button twice you should see the Alamo in San Antonio, Texas.  Let’s review the code.

The new Street View classes that have been added to the Google Maps API are accessible through JavaScript just the same as any other class in the API.  Let’s first review the a line of HTML code near the bottom of the file. 

The <div> tag is used as a container for the Street View and you will need to assign an id to the div along with a height and width for the container.  Notice that we have assigned a value of ‘pano’ as our id.  You’ll see this value again inside the JavaScript when we assign our StreetViewPanorama to this container.  You’ll also notice in the code above that we have defined a JavaScript function that will be called in response to the onload event.  In this case, the initialize() function will be called when the page loads.  So, let’s take a look at the initialize() function since this is where we create our Street View.

Just above the initialize() function you’ll notice that we’ve declared a variable called myPano which will store the Street View Panorama that is created.  Inside the function we create a new GLatLng object from a pair of coordinates and store this object in a variable called theAlamo.  This value is then used in the panoramaOptions variable which will be passed into the constructor for GStreetviewPanorama in the next line.  Remember that we said the GStreetviewPanorama object holds an instance of the Flash® Street View Panorama viewer.  It is the primary object used for the Street Views in Google Maps.  The supporting GStreetviewPanoramaOptions is used in the constuctor for GStreetviewPanorama and defines various options that are used to control the display and functionality of the viewer.  In this case we’re only passing in a latitude/longitude coordinate value, but you can also pass in a GPov object that controls the camera orientation with which to open the Flash viewer.  The other parameter in the GStreetviewPanorama constructor controls where the Street View will appear.   This is where the <div> tag that we created in the HTML body comes into play.  When we pass in document.getElementById(“pano”) to the constuctor we are specifically stating that the Street View should be placed in this <div> tag container.  Finally, we add in an event listener for the Street View so that it can report browsers that are unable to support the Flash plugin. 

This was a very simple example that demonstrates how you can use the new Street View classes in the Google Maps API to add in Street Views to your Google Maps application.  In our new few posts we will take a look at more advanced Street View code examples. 

For more information on the Google Maps API please see our popular e-learning course “Introduction to the Google Maps API.”  This course has been in production since January 2006 and has been our best selling course since that time.


Make a Comment

Leave a Reply

Please log in using one of these methods to post your comment: 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

2 Responses to “Add Google Maps Street Views To Your Apps”

RSS Feed for GeoChalkboard Comments RSS Feed

[…] Maps has added Street Views to it’s Google Maps API, and GeoChalkboard has a good piece on it including some sample code. New classes […]

[…] Maps has added Street Views to it’s Google Maps API, and GeoChalkboard has a good piece on it including some sample code. New classes […]

Where's The Comment Form?

Liked it here?
Why not try sites on the blogroll...

%d bloggers like this: