Setting Google Maps Street View Orientation with GPov

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

In our last post we introduced the new Google Maps API Street View objects which give developers the ability to enable Flash based street visualizations in select U.S. cities.  I described the functionality provided by the Street View objects as well as the capabilities of each object.  Finally, we took a look at a simple code sample that shows you how to use these objects to create a Street View Flash viewer. 

In this post we will examine how you can control the orientation of the Street View Flash viewer through the GPov class.  As we discussed last time, a Street View image consists of both a location, specified by a GLatLng object, as well as a particular orientation.  The orientation is specified through the GPov class.  Used together, these two parameters are used to construct the initial Street View object. 

Let’s examine the GPov class in greater detail.  GPov is an object literal which simply means that you do not create individual instances of a GPov through either a constructor or via other objects.  You simply use the properties and/or methods that are available to the literal class.  Let’s take a look at a code example to illustrate this point.

Example: Setting the GPov properties
myPOV = { yaw:90.00, pitch:-20, zoom:30 }

Properties of GPov
GPov has three optional properties that you can set, each of which are numeric values.

yaw – The camera yaw in degrees relative to true north.  True north is 0 degrees, east is 90 degrees, south is 180 degrees, and west is 270 degrees. 

pitch – The camera pitch in degrees, relative to the street view vehicle.  Values can range from 90 degrees (directly upwards) to -90 degrees (directly downwards)

zoom – The zoom level with 0 being fully zoomed-out, and values increased from there.

Note that I said all these parameters are optional.  In the event that you choose not to define any properties for GPov, they each default to 0 which defines a flat horizontal view directly north with the widest possible view.

Applying GPov to Street View
Once you’ve defined the parameters for GPov you will need to assign it to a GStreetviewPanorama object for the settings to take effect.  This can be done in two ways.  The first method is to assign GPov to an instance of GStreetviewPanoramaOptions which is then used in the constructor for GStreetviewPanorama.  Let’s take a closer look at how this is accomplished.  GStreetviewPanoramaOptions, like GPov, is an object literal.  This object literal has two properties that can be set: an instance of GLatLng, and an instance of GPov.  A code example can help reinforce this concept.

Example: Setting the GStreetviewPanoramaOptions properties and then using it in the constructor for GStreetviewPanorama
panoramaOptions = {  latlng:theAlamo, pov:myPOV }
myPano = new GStreetviewPanorama(document.getElementById(“pano”), panoramaOptions)

Click here to see the example in a web page.  Notice that we have set the yaw parameter to 90 which sets the direction to east.

The second method of assigning GPov to an instance of GStreetviewPanorama is through the setLocationAndPOV( ) method available on GStreetviewPanorama.  The setLocationAndPOV( ) method can be used to set the POV after an instance of GStreetviewPanorama has been created.  Once again, a code example is helpful to reinforce this concept. 

Example: Setting the POV through setLocationAndPOV
myPano = new GStreetviewPanorama(document.getElementById(“pano”));
var theAlamo = new GLatLng(29.425849,-98.486927);
myPOV = {yaw:90}myPano.setLocationAndPOV(theAlamo,myPOV) 

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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

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

%d bloggers like this: