Step3: Create a custom streetview


Slice a panorama

We have created a panorama at Step2, its width and height ratio must be 2 to 1, so I used 2048x1024 pixels.
streetview_ratio
Then slice the panorama. I recommend 256x256 pixels is best size to Google Maps API.
slice panorama image

Register a StreetView Provider

First, create a StreetView object, or get a default StreetView object from map.

// Create a StreetView object
var streetViewDiv = document.getElementById('streetview_canvas');
var streetView = new google.maps.StreetViewPanorama(streetViewDiv);

// Or get from a map
var streetView = map.getStreetView();

Then register a StreetView provider with google.maps.StreetViewPanoramaOptions.
streetView.setOptions({
  panoProvider : getCustomPanorama
});

function getCustomPanorama(panoID) {
}

When the position of StreetView is changed, the custom StreetView provider will be called with panorama ID. Panorama ID is identify of the panorama view, Google Street View has uniq IDs each panorama views. In this tutorial, I use "visitor_center". And when it is called with "visitor_center", return the StreetViewPanoramaData.
function getCustomPanorama(panoID) {
  var streetViewPanoramaData = {
    links: [],
    copyright: 'Imagery (c) Masashi Katsumata',
    tiles: {
        tileSize: new google.maps.Size(256, 256), //for debug, 2048x1024 is nice.
        worldSize: new google.maps.Size(2048, 1024),
        centerHeading: 0,
        getTileUrl: getCustomPanoramaTileUrl
     }
  };
  switch(panoID) {
    case "visitor_center":
      streetViewPanoramaData["location"] = {
        pano: 'visitor_center',
        description: "Visitor center",
        latLng: new google.maps.LatLng(37.556429,-122.050745)
      };
      return streetViewPanoramaData;
  }
}
In the above code, you can specify the "centerHeading" property in StreetViewPanoramaData, which means center degree of the panorama. As I mentioned in step2, I recommended that north is center position, which is nice I think. Because it makes easy to determine the direction when connect views of two panorama.

And the important point of this code is the "getTileUrl" property. It has to return url of sliced panorama image based with arguments.
function getCustomPanoramaTileUrl(panoID, zoom, tileX, tileY) {
  // Return a pano image given the panoID.
  return "ardenwood_tiles/" + panoID + '/'  + tileX + '-' +tileY + '_s1.jpg';
}

This code shows only panorama.
<script type='text/javascript'>

function code3_2() {
  // Set StreetView provider.
  var streetViewOptions = {
    zoom: 1,
    pano : "visitor_center",
    panoProvider:  getCustomPanorama
  };
  // Create a StreetView object.
  var streetViewDiv = document.getElementById('streetview_canvas1');
  streetViewDiv.style.fontSize = "15px";
  var streetView = new google.maps.StreetViewPanorama(streetViewDiv, streetViewOptions);
}

function getCustomPanoramaTileUrl(panoID, zoom, tileX, tileY) {
  // Return a pano image given the panoID.
  return "ardenwood_ardenwood_tiles/" + panoID + '/'  + tileX + '-' +tileY + '_s1.jpg';
}

function getCustomPanorama(panoID) {
  var streetViewPanoramaData = {
    links: [],
    copyright: 'Imagery (c) Masashi Katsumata',
    tiles: {
        tileSize: new google.maps.Size(256, 256),
        worldSize: new google.maps.Size(2048, 1024),
        centerHeading: 0,
        getTileUrl: getCustomPanoramaTileUrl
     }
  };
  switch(panoID) {
    case "visitor_center":
      streetViewPanoramaData["location"] = {
        pano: 'visitor_center',
        description: "Visitor center",
        latLng: new google.maps.LatLng(37.556429,-122.050745)
      };
      return streetViewPanoramaData;
  }
}

google.maps.event.addDomListener(window, 'load', code3_2);
    </script>

Connect with Google StreetView

In this tutorial, I'd like to connect between parking and visitor center. Google StreetView has panorama IDs each StreetView points, but it are not stable ID. They are only available in one blowser session, so you have to get a ID of parking point. (Referer: See pano_changed description.)

Uses StreetViewService.getPanoramaByLocation() method give the panorama ID based request location.

// Create a StreetViewService object.
var streetviewService = new google.maps.StreetViewService();

// Get panorama ID at parking.
var radius = 50;  //meter
streetviewService.getPanoramaByLocation(initPos, radius, function(result, status) {
  if (status == google.maps.StreetViewStatus.OK) {
    initPosPanoID = result.location.pano;
    streetView.setPosition(result.location.latLng);
  }
});

Then push a StreetViewLink to StreetViewPanoramaData.links property. I use "links_changed" event, because it can catch links_changed events both default and custom StreetView.
// Add links when it happens "links_change" event.
google.maps.event.addListener(streetView, "links_changed", createCustomLink);

function createCustomLink() {
  var links = streetView.getLinks();
  var panoID = streetView.getPano();
  
  switch(panoID) {
    case initPosPanoID:
      // Add a link to "visitor_center"
      links.push({
        description : "Welcome to Ardenwood",
        pano : "visitor_center",
        heading : 71
      });
      break;
      
    case "visitor_center":
      links.push({
        description : "Parking",
        pano : initPosPanoID,
        heading : 248
      });
      break;
  }
}
Repeat the same way, you can create more points. That's all!
Check below example.

Example



Code

<script type='text/javascript'>

var initPosPanoID, streetView;

function initialize() {
  //In front of Ardenwood.
  var initPos = new google.maps.LatLng(37.55631,-122.051153);  

  // Set StreetView provider.
  var streetViewOptions = {
    zoom: 1,
    panoProvider:  getCustomPanorama,
    pov : {
      heading : 55,
      pitch : 0,
      zoom : 1
    }
  };
  
  // Create a StreetView object.
  var streetViewDiv = document.getElementById('streetview_canvas2');
  streetViewDiv.style.fontSize = "15px";
  streetView = new google.maps.StreetViewPanorama(streetViewDiv, streetViewOptions);

  // Add links when it happens "links_change" event.
  google.maps.event.addListener(streetView, "links_changed", createCustomLink);
  
  // Create a StreetViewService object.
  var streetviewService = new google.maps.StreetViewService();
  
  // Get panorama ID of initPos
  var radius = 50;
  streetviewService.getPanoramaByLocation(initPos, radius, function(result, status) {
    if (status == google.maps.StreetViewStatus.OK) {
      initPosPanoID = result.location.pano;
      streetView.setPosition(result.location.latLng);
    }
  });
  
}

function getCustomPanoramaTileUrl(panoID, zoom, tileX, tileY) {
  // Return a pano image given the panoID.
  return "ardenwood_tiles/" + panoID + '/'  + tileX + '-' +tileY + '_s1.jpg';
}

function getCustomPanorama(panoID) {
  var streetViewPanoramaData = {
    links: [],
    copyright: 'Imagery (c) Masashi Katsumata',
    tiles: {
        tileSize: new google.maps.Size(256, 256),
        worldSize: new google.maps.Size(2048, 1024),
        centerHeading: 0,
        getTileUrl: getCustomPanoramaTileUrl
     }
  };
  switch(panoID) {
    case "visitor_center":
      streetViewPanoramaData["location"] = {
        pano: 'visitor_center',
        description: "Visitor center",
        latLng: new google.maps.LatLng(37.556429,-122.050745)
      };
      return streetViewPanoramaData;
  }
}

function createCustomLink() {
  /*
   * add links
   */
  var links = streetView.getLinks();
  var panoID = streetView.getPano();
  
  switch(panoID) {
    case initPosPanoID:
      links.push({
        description : "Welcome to Ardenwood",
        pano : "visitor_center",
        heading : 71
      });
      break;
      
    case "visitor_center":
      links.push({
        description : "Parking",
        pano : initPosPanoID,
        heading : 248
      });
      break;
      
  }
  
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Step2: Making a panorama |  Index: The way of creating custom streetview

Search
Books
Google Maps API Programming Guide

Four Google Maps API Experts wrote this book. Introducing useful examples for developers!
See more details