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>



