Hacker Dojo Street View

Description

This is a demo of custom StreetView.
Here is Hacker Dojo.

How to create is here.

Code

<script type='text/javascript'>

var streetView = null;
var panoID_cache = {};
var tilesData = new google.maps.MVCObject();
var streetviewService = new google.maps.StreetViewService();
var infoWnd = new google.maps.InfoWindow();

function makePanoIdCache(id, latLng) {
  streetviewService.getPanoramaByLocation(latLng, 10, function(result, status) {
    if (status == google.maps.StreetViewStatus.OK) {
      panoID_cache[id] = result.location.pano;
    }
  });
}

function initialize() {
  /*
   * Get panoramaIDs
   */
  for (var id in tiles_map) {
    if (id.match(/^[0-9\.\-]+,[0-9\.\-]+$/) != null) {
      makePanoIdCache(id, tiles_map[id].location.latLng);
    }
  }
  
  /*
   * Create a streetview panorama
   */

  var initPos = new google.maps.LatLng(37.387017,-122.063443);
  
  var stDiv = document.getElementById("streetview_canvas");
  var stOpts = {
    position : initPos,
    pov : {
      zoom : 1,
      heading : 270,
      pitch : 0
    },
    panoProvider:  getCustomPanorama
  };
  streetView = new google.maps.StreetViewPanorama(stDiv, stOpts);
  
  
  /*
   * Add custom links
   */
  google.maps.event.addListener(streetView, 'links_changed', function() {
    //Load tile data
    var panoID = this.getPano();
    var position = this.getPosition();
    var tileData = getTileData(panoID);
    var readablePanoID = position.toUrlValue();
    if (tileData == null) {
      tileData = getTileData(readablePanoID);
      if (tileData != null) {
        panoID_cache[readablePanoID] = panoID;
      }
    }
    if (tileData == null || "links" in tileData == false) 
      return;
    
    //Compute heading between current and next positions.
    var links = this.getLinks();
    var tData;
    var j = tileData.links.length;
    for (var i = 0; i < j; i++) {
      tData = getTileData(tileData.links[i].pano);
      if (tData != null) {
        tileData.links[i].heading = computeAngle(tData.location.latLng, position);
        if (tileData.links[i].pano in panoID_cache) {
          tileData.links[i].pano  = panoID_cache[tileData.links[i].pano];
        }
        links.push(tileData.links[i]);
      }
    }
  });
}
function getTileData(id) {
  if (id in tiles_map) {
    return tiles_map[id];
  } else {
    return null;
  }
}
/*
 * This function is called when the viewer has clicked a link.
 */
function getCustomPanorama(panoID) {
  var tileData = getTileData(panoID);
  if (tileData == null) {
    return;
  }
  var streetViewPanoramaData = {
    copyright: "Masashi Katsumata",
    
    //google.maps.StreetViewTileData
    tiles : {
      getTileUrl : getPanoramaTileUrl,
      centerHeading : 0,
      tileSize : new google.maps.Size(256, 256),
      worldSize : new google.maps.Size(2048, 1024)   //Definitely 2:1
    }
  };
  if ("tiles" in tileData) {
    for (var key in streetViewPanoramaData.tiles) {
      if (key in tileData.tiles) {
        streetViewPanoramaData.tiles[key] = tileData.tiles[key];
      }
    }
  }
  streetViewPanoramaData.location = tileData.location;
  streetViewPanoramaData.location.description = tileData.location.description;
  streetViewPanoramaData.links = tileData.links;
  return streetViewPanoramaData;
}

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

function computeAngle(endLatLng, startLatLng) {
  // http://gmaps-samples.googlecode.com/svn/trunk/streetview/angletowardsbuilding.html
  var DEGREE_PER_RADIAN = 57.2957795;
  var RADIAN_PER_DEGREE = 0.017453;
  var dlat = endLatLng.lat() - startLatLng.lat();
  var dlng = endLatLng.lng() - startLatLng.lng();
  // We multiply dlng with cos(endLat), since the two points are very closeby,
  // so we assume their cos values are approximately equal.
  var yaw = Math.atan2(dlng * Math.cos(endLatLng.lat() * RADIAN_PER_DEGREE), dlat) * DEGREE_PER_RADIAN;
  if (yaw >= 360) {
    yaw -= 360;
  } else if (yaw < 0) {
    yaw += 360;
  }
  return yaw;
}

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