By default, Google Maps provides the Street View display. All you must to do is drag the Pegman of the map on a StreetView-enabled street. It's often marked by blue lines. Drag the Pegman in that place, drop it and your map become the Street View of that place..
 |
| Drag the Pegman |
 |
| Drop it in a blue line (StreetView-enabled street) and this is the result |
In this post, i will give you example for a simple application that show a panoramic with a predefined point of view setting based on the position of the Pegman.
First, you need to define the references to the Google Maps javascript API inside the <head> tag before any initialization of the maps.
Second, you must specify the layout for the web application. I need two <div> element, one for the maps and one for the panoramic. Here's the code :
And then you must define the initialization function for the maps and the panoramic.
The panoramaOptions is a variable that define the options for the Panoramic View. The position attribute is the default first panoramic view for the application. It was placed in the same position with the center of the map. The pov attribute itself contain three child attribute. Here is the explanation from the Google Maps Javascript API v3 :
- heading : (default 0) defines the rotation angle around the camera locus in degrees relative from true north. Headings are measured clockwise (90 degrees is true east).
- pitch : (default 0) defines the angle variance "up" or "down" from the camera's initial default pitch, which is often (but not always) flat horizontal. (For example, an image taken on a hill will likely exhibit a default pitch that is not horizontal.) Pitch angles are measured with positive values looking up (to +90 degrees straight up and orthogonal to the default pitch) and negative values looking down (to -90 degrees straight down and orthogonal to the default pitch).
- zoom : (default 1) defines the zoom level of this view (effectively proscribing the "field of view") with 0 being fully zoomed-out. Most Street View locations support zoom levels from 0 to 3, inclusive.
After define the options for the StreetViewPanorama object, you must pass it in the StreetViewPanorama object's constructor. The other parameter is the id of the <div> element that will be the container for the panoramic view.
After that we must call map's setStreetView function and pass the StreetViewPanoramaObject as its parameter. Call the initialization function when the window load event, and the web application will be like below :
 |
| Default first view |
Try to moving the Pegman and you will see that Panoramic view changed when the Pegman hovering a new place.
 |
| Dragging the Pegman |
Drop the Pegman in the new place and the Panoramic View will immediately change the view to where the Pegman drooped.
 |
| After dropping the Pegman |
The Google Maps Javascript v3 Street View is very useful to display the real panoramic for a placeand it also provides an arrow link that will guide us to the nearest location around the panoramic that is displayed.
For the complete references of this services, you can see it in the Google Maps Javascript v3 API. You can download the source code for the example here.
Hopefully this post will give you good understanding about Google Maps Street View with Panoramic. Contact me if you have more question.. Thanks for your visit in my blog.. Regardss.. ^_^
I am Live In Indonesia ...
ReplyDeletecan we show the building like your example...?
thanks regard..
Haha. i've tried that before. But it seems Google still didn't provide the panoramic of Indonesia. But you can custom it for your web application. You can create your own panoramic and set it in Google Maps. You can also provide the arrow link for it. Here is the example of creating custom panoramic. The example is the Google's office.
ReplyDeleteExplanation :
http://code.google.com/apis/maps/documentation/javascript/services.html#TilingPanoramas
Example:
http://code.google.com/apis/maps/documentation/javascript/examples/streetview-custom-tiles.html
Hopefully the panoramic for Indonesia will be provided by Google as soon as possible.. ^_^
oh no! the link fr the source code is broken. i want to do a panorama of an office. i have the 360º pics but the example google api v3 custom panorama is not working to me
ReplyDeletePanorama control for .NET application
ReplyDelete