Hi Brad,
Here's my notes on how to use Street View in Maps Javascript API v3.
I'm hoping to blog in more details but i'm still recovering from the
launch and Google IO.
We'll also publish demo pages soon.
Enabling and initializing Street View
=====================================
How to enable StreetView
map.set('streetViewControl', true);
or
map.setOptions({
streetViewControl: true
});
How to access the panorama in the map
var panorama = map.getStreetView();
How to know if the panorama is displayed
var panoramaDisplayed = panorama.getVisible();
How to set a manual Pano Id
panorama.setPano('-gfXi6db7jFB-cwAkTbBgA');
or
panorama.setOptions({
pano: '-gfXi6db7jFB-cwAkTbBgA'
});
How to set a manual position
panorama.setPosition(new google.maps.LatLng(48.85969, 2.29720));
or
panorama.setOptions({
position: new google.maps.LatLng(48.85969, 2.29720)
});
How to set the point of view
panorama.setPov({heading:30, pitch:0, zoom:4});
or
panorama.setOptions({
pov: {heading:30, pitch:0, zoom:4}
});
How to create a panorama without a map
var div = document.getElementById('panoramadiv');
var panorama = new google.maps.StreetViewPanorama(div);
How to have a separate panorama next to the map
var div = document.getElementById('panoramadiv');
var panorama = new google.maps.StreetViewPanorama(div);
map.setStreetView(panorama);
or
var div = document.getElementById('panoramadiv');
var panorama = new google.maps.StreetViewPanorama(div);
map.setOptions({
streetView: panorama
});
Events
======
How to monitor changes to pano Id
google.maps.event.addListener(panorama, 'pano_changed', function()
{});
How to monitor changes to position
google.maps.event.addListener(panorama, 'position_changed', function()
{});
How to monitor changes to the point of view
google.maps.event.addListener(panorama, 'pov_changed', function() {});
Markers, InfoWindows and Custom Overlays
=========================================
How to add a marker in the panorama
var marker = new google.maps.Marker();
marker.setMap(panorama);
How to add an infowindow in the panorama
var infowindow = new google.maps.InfoWindow();
infowindow.open(panorama);
how to add a custom overlay in the panorama
function CustomOverlay() {};
CustomOverlay.prototype = new google.maps.OverlayView;
var customOverlay = new CustomOverlay();
customOverlay.setMap(panorama);
Controls
========
How to show/hide the address control
panorama.set('addressControl', true/false);
or
panorama.setOptions({
addressControl: true/false
});
how to style the address control in the panorama
panorama.setOptions({
'addressControlOptions': {
'style': {
'border': '1px solid red',
'backgroundColor': 'blue'
},
...
}
});
how to position the address control in the panorama
panorama.setOptions({
'addressControlOptions': {
'position': google.maps.ControlPosition.TOP_RIGHT,
...
}
});
How to show/hide the links control
panorama.set('linksControl', true/false);
or
panorama.setOptions({
linksControl: true/false
});
How to add a link in the links control
var links = panorama.getLinks();
links.push({
'yaw': 150,
'description' : 'For Sale',
'pano' : 'entrance',
'roadColor': 'blue',
'roadOpacity': 0.4
});
then
panorama.setLinks(links);
or
panorama.setOptions({
links: links
});
or
panorama.notify('links');
how to add a custom control in the panorama
var aLink = document.createElement('a');
aLink.innerHTML = "Hello";
aLink.href = "http://google.com";;
panorama.controls[google.maps.ControlPosition.BOTTOM].push(aLink);
How to show/hide the close button
panorama.set('enableCloseButton', true/false);
or
panorama.setOptions({
enableCloseButton: true/false
});
How to detect the close button has been clicked
google.maps.event.addListener(panorama, 'closeclick', function() {});
How to show/hide the Navigation controls
panorama.set('navigationControl', true/false);
or
panorama.setOptions({
navigationControl: true/false
});
How to select the style and position of the navigation controls
panorama.set('navigationControlOptions', {
position: google.maps.ControlPosition.TOP_LEFT,
style: google.maps.NavigationControlStyle.ZOOM_PAN
});
or
panorama.setOptions({
navigationControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT,
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});
Custom Panorama
===============
How to display a custom panorama
panorama.registerPanoProvider(function(pano) {
return {
location: {
pano: pano,
},
tiles: {
tileSize: new google.maps.Size(256, 256),
worldSize: new google.maps.Size(256 * 64, 256 * 32),
originHeading: 110,
getTileUrl: function(pano, zoom, x, y) {
return 'http://someurl/somepath/' + pano + '/' + zoom + '_' +
x + '_' + y + '.png';
}
}
};
});
How to set the address text in a custom panorama
panorama.registerPanoProvider(function(pano) {
return {
location: {
...
description: 'Address Text'
},
...
};
});
How to set the copyright in a custom panorama
panorama.registerPanoProvider(function(pano) {
return {
copyright: 'Copyright text',
...
};
});
How to set the links in a custom panorama
panorama.registerPanoProvider(function(pano) {
return {
links: [
{
'heading': 171,
'description' : 'Link Text 1',
'pano' : '5pXLKKqtDowwU0mrpx8pWw'
},
{
'heading': 351,
'description' : 'Link Text 2',
'pano' : '0682ricVXBNcNuEcpSb-rA'
}
],
...
};
});
How to set specify the color and opacity of a link in a custom
panorama
panorama.registerPanoProvider(function(pano) {
return {
links: [
{
...
'roadColor' : '#0020C0',
'roadOpacity' : 0.6
},
...
],
...
};
});
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
