I've gotten around the V3 google api not having a maximize button. I've used information from http://www.drcoen.com/2010/12/html-divs-layered-onto-google-streetview-chrome-issue/ to create a new div overlayed on top of my map (like their Hello dialog). The div contains a maximize button which is an image. Clicking on the image uses onclick to call the maximizeStreetView function which is a new function that changes the dimensions of the ArcGIS map and the streetview panorama. The other piece of key information I needed was the function to call once the panorama div is resized to refresh the panorama so it fills the whole div. The function is google.maps.event.trigger(panorama, 'resize');I need to build another button which will do the same thing, except call the restore function to get out of fullscreen. The concept should be identical though.
function initialize_container()
{
//alert('Container Initialized');
// create container
var obj= getSWF("agsview3");
obj.height = getPageHeight() - streetviewHeight;
var svh = streetviewHeight + "px";
var divTag = document.createElement("div");
divTag.id = "pano";
divTag.style.width = "100%";
divTag.style.height = svh;
divTag.style.position = "absolute";
divTag.style.bottom = "0px";
divTag.style.right = "0px";
divTag.style.left = "0px";
divTag.innerHTML = '<div style="position: absolute; top: 20px; right: 20px; width: 100px; height: 36px; text-align: center; color: #000; z-index: 2; line-height: 36px;"><img width="20px" height="20px" src="assets/images/maximize-button.png" onclick="maximizeStreetView();" /></div>';
document.body.appendChild(divTag);
addEvent(window, "resize", windowResized );
}
function maximizeStreetView()
{
try
{
var theDiv = document.getElementById("pano");
if(theDiv!=null)
{
var obj= getSWF("agsview3");
obj.height = "1";
theDiv.style.display = "block";
theDiv.style.height = "100%";
google.maps.event.trigger(panorama, 'resize');
}
}catch(err){
alert(err);
}
}
.png "TimDine"){kind=avatar}
