Appears StreetView Layer

Description

GStreetviewOverlay class is available in Google Maps API v2, but there is no the same class in Google Maps API v3. So in this time, this page describes how to create it using ImageMapType class.

ImageMapType class

ImageMapType creates a map type easily, only you specify to define a function to return urls of map tiles.

var imgMapTypeOptions = {
  getTileUrl : function(point, zoom) {
    var tileUrl = "./tiles.php?x=" + point.x + "&y=" + point.y + "&zoom=" + zoom;
    return tileUrl;                          //Return map tiles url
  },
  tileSize: new google.maps.Size(256, 256),  //Sizes must be rectangular.
  alt: "",                                   //Alternative text of image.
  maxZoom: 19,                               //Maxium zoom level
  minZoom: 10,                               //Minium zoom level
  name: "MyMapType",                         //The Name of map type
  opacity: 0.5                               //Opacity(from 0.0 to 1.0)
};
var myMapType = new google.maps.ImageMapType(imgMapTypeOptions);


Created maptype can regist to map as regular map type, but you can insert it using overlayMapTypes.insertAt() method as map type overlay: Map.overlayMapTypes.insertAt(0, myMapType);
The number of "zero"(the first argument) is a registered map type, which is ususally ROADMAP. insertAt(0, myMapType)



Code

<script type='text/javascript'>

    var mapCanvas;

    function intialize() {
      
      var streetViewLayer = new google.maps.ImageMapType({
        getTileUrl : function(coord, zoom) {
          return "http://www.google.com/cbk?output=overlay&zoom=" + zoom + "&x=" + coord.x + "&y=" + coord.y + "&cb_client=api";
        },
        tileSize: new google.maps.Size(256, 256)
      });
      
      
      //Create a map
      mapCanvas = new google.maps.Map(document.getElementById("map_canvas"));
      mapCanvas.overlayMapTypes.insertAt(0, streetViewLayer);
      mapCanvas.setCenter(new google.maps.LatLng(40.803, -74.097));
      
      mapCanvas.setZoom(14);
      mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);
      
    }
    
    google.maps.event.addDomListener(window, "load", intialize);
  </script>

Search
Books
Google Maps API Programming Guide

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