How to set another function to closebutton in panorama - google-maps

(sorry for my english) i have a problem,,, I´m trying to create a web in which user click on a polygon and it move user to another page with Google Street View Panorama (this i have). But i also need a code to move user back from "panorama page" to "polygons page" after clicking on close button in panorama. I tried to use the same code like i used before to move user to "panorama page" but it doesn´t work (it just closes panorama, but doesn´t move back to "polygons page"). The line:
google.maps.event.addListener(panorama, "closeclick", function(event) { window.location = "index.html"; })
is the code to move user back to "polygons page" (index.html). Here is the whole code:
function initialize() {
var panoOptions = {
pano: 'Kuchyn',
enableCloseButton: true,
pov: {
heading: 0,
pitch: 0,
zoom: 0
},
panoProvider: getCustomPanorama,
visible: true};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'), panoOptions);
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
return 'images/Untitled.jpg';}
function getCustomPanorama(pano, zoom, tileX, tiley) {
if (pano == 'Kuchyn') {
return {
location:
{pano: 'Kuchyn',
description: 'Kromeriz - Kuchyn'},
links: [],
copyright: 'Oznog (c) 2013',
Heading: 180,
tiles:
{tileSize: new google.maps.Size(4096, 2048),
worldSize: new google.maps.Size(4096, 2048),
centerHeading: 180,
verticalFOV: 90,
getTileUrl: getCustomPanoramaTileUrl}
};
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(panorama, "closeclick", function(event) { window.location = "index.html"; })
Please help me, Jan.

Your eventListener for panorama is outside initialize function, move it under panorama declaration as follows:
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'), panoOptions);
// move it here
google.maps.event.addListener(panorama, "closeclick", function(event) { window.location = "index.html"; });
This is because you are not declaring panorama as a global variable, so it cant be attached correctly. Other option is to declare it as global variable var panorama; to above your initialize method.
Cheers.

Related

Google Maps API Implementing click event to get the target element

Here's a question regarding Google maps API events:
marker.addListener('click', _.bind(function (e) {
}
In the above code I am unable to get e.target element on which I need to call a function.
Basically the situation is I have a list of markers and on click of one, the function needs to be triggered and on click of the same marker the function should unbind.
Can anyone help me with this?
Hello I worked with marker in past and kinda had same issue, I did some research and found this solution on SO and it worked.
you can created function like this
function createCallback(marker, callback) {
google.maps.event.addListener(marker, 'click', function () {
// do whatever you want to do
callback()
});
}
And after that call it like this
var markerPropertyLocation = new google.maps.Marker({
position: {markerPosition},
map : {map},
icon: new google.maps.MarkerImage(
{iconImage},
null, /* size is determined at runtime */
null, /* origin is 0,0 */
null, /* anchor is bottom center of the scaled image */
new google.maps.Size(20, 27))
});
createCallback(markerPropertyLocation, function(){
// callback funcation
});
Thanks
To be more precise with my requirements, I have restructured my queries and reposting the same:
On our Google maps implementation we have the following Requirements:
• Getting the target element that is clicked marker, out of all displayed on the screen
• Enlarge the marker once clicked and apply class only to that specific marker(clicked marker)
We have written the following code, but it doesn’t give the above results.
However, a similar interaction works on hover showing the tootip with details
Code Snippet:
ReferenceMap.prototype.showPoint = function showPoint(point, map) {
var location = point.get('location')
, marker = new google.maps.Marker({
store_id: point.get('internalid')
, icon: iconSrc
, map: map
, point: point
, title: point.get('internalid')
});
allMarker.push(marker);
marker.setPosition(new google.maps.LatLng(location.latitude, location.longitude));
marker.setVisible(true);
marker.addListener('mouseover', _.bind(function () {
this.showInfoWindowOnClick(marker, map);
}, this));
marker.addListener('mouseout', _.bind(function () {
hideShowInfoWindow();
}, this));
marker.addListener('click', _.bind(function (e) {
// var markerTitle = marker.title;
// var markerID = marker.store_id;
// var target = markerTitle == markerID;
// if(target == e.target) {
// $('.marker img').css('width',200);
// dealerDetailsLeftBlock();
// }
// else {
// $('.marker img').removeAttr('style');
// }
console.log(e.target);
areaMarkers.reset();
for (var i = 0; i < allMarker.length; i++) {
allMarker[i
].isClicked = 'F';
allMarker[i
].point.set('isClicked', 'F');
marker.set('isClicked', 'T');
if (map.getBounds().contains(allMarker[i
].getPosition())) {
//console.log(allMarker[i]);
if (allMarker[i
].isClicked == 'T') {
$('[title="' + marker.title + '"
]').addClass('marker - design');
console.log($('[title="' + marker.title + '"
]'))
// console.log(allMarker[i]);
allMarker[i
].point.set('isClicked', 'T');
}
areaMarkers.add(allMarker[i
].point);
}
};
//console.log(areaMarkers);
dealerDetailsLeftBlock();
this.trigger('getSideBar')
}, this));
if (this.markerCluster) {
this.markerCluster.addMarker(marker);
}
return marker;
};

Panotour Pro 2 - Adding KML in Google Maps API v3

I have been working with the Google Maps API v3 in Panotour for a few days now and had been adding my own KML layers to my Panotour Maps. I had it working yesterday but today it seems to have been broken somehow.
To add my own KML layers I am basically just adding a piece of script to my project build under "\graphics\KolorMap\lib\mxn.googlev3.core".
This is the chunk of code I was piecing into the googlev3.core file. Its the KML sample from the developers website. I wanted to get it working before adding my own custom stuff.
var ctaLayer = new google.maps.KmlLayer({
url: 'http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml'
});
ctaLayer.setMap(map);
I have added a link to the mxn.googlev3.core. If anyone knows where I need to put my code or if I need to add anything that would be much appreciated.
mxn.googlev3.core
Thanks in advance
There are still some bugs that I am sorting through and I may still need some help with them.
Below is the code excerpt from the mxn.googlev3.core file. The code is from Line 1 to about Line 140. I forget where exactly because I have added my own code.
mxn.register('googlev3', {
Mapstraction: {
init: function(element, api){
var me = this;
if (typeof google.maps.Map === 'undefined') {
throw new Error(api + ' map script not imported');
}
// by default add road map and no controls
var myOptions = {
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: null,
zoomControl: false,
zoomControlOptions: null,
panControl: false,
panControlOptions: null,
scaleControl: false,
scaleControlOptions: null,
scrollwheel: true,
draggable: false,
disableDoubleClickZoom: true
};
// Background color can only be set at construction
// To provide some control, adopt any explicit element style
var backgroundColor = null;
if ( element.currentStyle ) {
backgroundColor = element.currentStyle['background-color'];
}
else if ( window.getComputedStyle ) {
backgroundColor = document.defaultView.getComputedStyle(element, null).getPropertyValue('background-color');
}
// Only set the background if a style has been explicitly set, ruling out the "transparent" default
if ( backgroundColor && 'transparent' !== backgroundColor ) {
myOptions.backgroundColor = backgroundColor;
}
// find controls
if (!this.addControlsArgs && loadoptions.addControlsArgs) {
this.addControlsArgs = loadoptions.addControlsArgs;
}
if (this.addControlsArgs) {
if (this.addControlsArgs.zoom) {
myOptions.zoomControl = true;
if (this.addControlsArgs.zoom == 'small') {
myOptions.zoomControlOptions = {style: google.maps.ZoomControlStyle.SMALL,position: google.maps.ControlPosition.TOP_LEFT};
}
if (this.addControlsArgs.zoom == 'large') {
myOptions.zoomControlOptions = {style: google.maps.ZoomControlStyle.LARGE,position: google.maps.ControlPosition.TOP_LEFT};
}
}
if (this.addControlsArgs.scale) {
myOptions.scaleControl = true;
myOptions.scaleControlOptions = {style:google.maps.ScaleControlStyle.DEFAULT,position: google.maps.ControlPosition.BOTTOM_LEFT};
}
if (this.addControlsArgs.pan) {
myOptions.panControl = true;
myOptions.panControlOptions = {position: google.maps.ControlPosition.TOP_LEFT};
}
if (this.addControlsArgs.map_type) {
myOptions.mapTypeControl = true;
myOptions.mapTypeControlOptions = {style: google.maps.MapTypeControlStyle.DEFAULT,position: google.maps.ControlPosition.TOP_RIGHT};
}
if (this.addControlsArgs.overview) {
myOptions.overviewMapControl = true;
myOptions.overviewMapControlOptions = {opened: true};
}
}
// Enable the visual refresh
google.maps.visualRefresh = true;
var map = new google.maps.Map(element, myOptions);
var fireOnNextIdle = [];
google.maps.event.addListener(map, 'idle', function() {
var fireListCount = fireOnNextIdle.length;
if (fireListCount > 0) {
var fireList = fireOnNextIdle.splice(0, fireListCount);
var handler;
while((handler = fireList.shift())){
handler();
}
}
});
// deal with click
google.maps.event.addListener(map, 'click', function(location){
me.click.fire({'location':
new mxn.LatLonPoint(location.latLng.lat(),location.latLng.lng())
});
});
// deal with zoom change
google.maps.event.addListener(map, 'zoom_changed', function(){
// zoom_changed fires before the zooming has finished so we
// wait for the next idle event before firing our changezoom
// so that method calls report the correct values
fireOnNextIdle.push(function() {
me.changeZoom.fire();
});
});
// deal with map movement
var is_dragging = false;
google.maps.event.addListener(map, 'dragstart', function() {
is_dragging = true;
});
google.maps.event.addListener(map, 'dragend', function(){
me.moveendHandler(me);
me.endPan.fire();
is_dragging = false;
});
google.maps.event.addListener(map, 'center_changed', function() {
me.endPan.fire();
});
// deal with initial tile loading
var loadListener = google.maps.event.addListener(map, 'tilesloaded', function(){
me.load.fire();
google.maps.event.removeListener( loadListener );
if (!is_dragging) {
fireOnNextIdle.push(function() {
me.endPan.fire();
});
}
});
this.maps[api] = map;
this.loaded[api] = true;
// THIS IS THE KML CODE THAT YOU NEED TO INSERT -START
var ctaLayer = new google.maps.KmlLayer({
url: 'Insert your kml here link here'
});
ctaLayer.setMap(map);
//END KML CODE SECTION
},
The "Insert your kml link here" is where you put your kml url link.
For some reason the attributes stop displaying at intermittent times. They will work and then I will go to click on a feature again to view the attributes and nothing. This is one of the bugs. I am also messing around with document links within the kml feature attribute tables. As I get deeper into this this Panoramic program is becoming more of a GIS program.
If anyone has any other ideas about this please feel free to make suggestions.

Google Maps API v3, jQuery , Tabs, map not showing on hidden div

This question had already been addressed multiple times, but all the solutions don't fix the problem in my case. It's as many already wrote: tabs used to display different parts of content, when loading the map in tab1 i.e. the one that opens on pageload, it displays fine.
When loading the map inside one of the other tabs, that need to be clicked, to be called, it doesn't draw the map as it is supposed to.
I already tried adding the google.maps.event.trigger(map, 'resize'); when the tab is clicked, but it doesn't do anything.
Here is my code, i am going crazy over this, have spent 10+ hours trying all suggestions !
This is the part that handles the tabs being clicked :
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
if (activeTab=='#tab4') {
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}
$(activeTab).fadeIn(
); //Fade in the active content
return false;
});
});
When using an alert to see if the code is called on tab4 it works.
Here is the googlemaps code
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(<? echo $lattie; ?>, <? echo $langie; ?>),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(map, 'center_changed', function() {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 3000);
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I am calling intitalize() in the body tag, changing this to the place where i am calling the resize, doesn't solve it either.
Finally the bit that shows the div with the map-canvas :
<li id="four">
<div id="map-canvas" style="width:575px; height:500px;float:left;border:1px solid #d74c15;"></div>
</li>
As i said, i am going crazy over this, i just can't get it to work, any help would be much appreciated !
This is a little bit tricky in one of my projects some time ago I got stuck on the same thing while trying to hide and show the map via a link.For me the resize event handler was all I needed but make sure to add the following code after it:
UPDATE here is the complete function used.
function showMap(){
if(animating == false)
{
animating = true;
if(mapVisible == false)
{
$("#map-wrapper").animate({
height:352
},500,function(){
$("#create-event-map").fadeIn("fast");
google.maps.event.trigger(eventsMap, 'resize');
var center = new google.maps.LatLng(38,24);
eventsMap.setCenter(center);
$("#show-map-wrapper a").html("Hide map");
mapVisible = true;
animating = false;
})
}
else
{
$("#create-event-map").fadeOut("fast",function(){
$("#map-wrapper").animate({
height:0
},500);
$("#show-map-wrapper a").html("Show map");
mapVisible = false;
animating = false;
})
}
}
return false;
}
working example here: http://goo.gl/2syX8
it's in the create.event.init.js file if you want to check it out
UPDATE
In your case if you want to refresh the map you should change this code:
if (activeTab=='#tab4') {
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}
$(activeTab).fadeIn(
); //Fade in the active content
With this:
if(activeTab == 'YOUR TAB ID')
{
$(activeTab).fadeIn(function(){
google.maps.event.trigger(map, 'resize');
var center = new google.maps.LatLng(<LAT>,<LNG>);
map.setCenter(center);
map.setZoom( map.getZoom() );
})
}
Store the last used lat and lng and replace them in this piece of code.

street view panorama completely grey

I have created a street view backbone view. The problem is that when shown, the panorama is completely grey. I am not sure if it has to do with the fact that it is inside a tab and the panorama is rendered when the tab is opened.
I am guessing that it might be an analogous problem that is fixed calling the resize event. Is there any similar thing that I could do?
App.DetailStreetView = Backbone.View.extend({
initialize: function() {
this.latLng = new google.maps.LatLng(37.869085,-122.254775);
},
render: function() {
var sv = new google.maps.StreetViewService();
this.panorama = new google.maps.StreetViewPanorama(this.el);
sv.getPanoramaByLocation(this.latLng, 50, this.processSVData);
},
processSVData: function(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
// calculate correct heading for POV
var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, this.latLng);
this.panorama.setPano(data.location.pano);
this.panorama.setPov({
heading: 270,
pitch:0,
zoom:1,
});
}
},
refresh: function() {
this.panorama.setVisible(true);
google.maps.event.trigger(this.panorama, 'resize');
}
});
EDIT:
I created a JSFiddle that replicates the problem: http://jsfiddle.net/kNS2L/3/
Yeah, this is the old display:none with Maps and Panoramas. It works when I add setVisible(true):
$('button').click(function() {
$('#pano').show();
panorama.setVisible(true);
});

Street view API 3 (add custom minimap) close button Street view and Pegman

In my script, when you drop the pegman on to the map, it loads Street View with a custom minimap. You can see the minimap with the pegman and move it for Street View, and it works fine.
However, when you click the close button on the street view, the minimap and Street View close fine but the pegman doesn't return to its default position. It stays on the map, and can't be re-dropped.
I want to move the pegman back to default position when Street View is closed, and if you drop it on map again to load Street View like the first time.
online code http://jsbin.com/ayejim/edit#preview
This is my function initialize:
function initialize() {
var lifestyle = [{}];
var myOptions = {
zoom: CITY_MAP_ZOOMING_FACT,
center: new google.maps.LatLng(CITY_MAP_CENTER_LAT, CITY_MAP_CENTER_LNG),
mapTypeId: google.maps.MapTypeId.<?php echo $maptype;?>
}
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
map.setOptions({styles: lifestyle});
/////////////////////////////
var g = google.maps;
var pano, mini;
var mapdiv = document.getElementById("map_canvas");
pano = map.getStreetView();
/** Listen to panorama's visibility changes to detect
* when pegman is dropped onto the map
* and when Street view is closed
*/
g.event.addListener(pano, "visible_changed", function() {
// Street view activated by dropping pegman
if (!mini && pano.getVisible()) {
// Container for mini map and close button
var c = document.createElement("div");
c.id = "minimap";
c.style.visibility = "visible";
var d = document.createElement("div");
d.id = "closebutton";
d.onclick = function() {
// Toggles button icon and moves copyright notice
var terms = document.getElementById("note");
// var terms = mapdiv.childNodes[1].childNodes[2];
if (c.style.visibility == "visible") {
c.style.visibility = "hidden";
d.className = "closed";
terms.style.marginRight = "24px";
}
else {
c.style.visibility = "visible";
d.className = "";
terms.style.marginRight = "170px";
}
};
c.appendChild(d);
mapdiv.appendChild(c);
mapdiv.appendChild(d);
mini = new g.Map(c, {
center: pano.getPosition(),
zoom: 15,
mapTypeId: "roadmap",
disableDefaultUI: true,
streetViewControl: true,
streetView: pano,
styles: lifestyle
});
/** Moves the 'Terms' notice to the left
* to ensure it's not covered up.
* There are two such notices in the document.
* Make sure to catch the right ones.
*/
g.event.addListener(mini, "tilesloaded", function() {
var terms = mini.getDiv().firstChild.childNodes[2];
terms.style.marginRight = "24px";
var sv_terms = mapdiv.childNodes[1].childNodes[2];
sv_terms.id = "note";
sv_terms.style.marginRight = "170px";
sv_terms.style.zIndex = "1";
});
// Binds mini map's center to pano position
mini.bindTo("center", pano, "position");
// Street view finished by click on Street view close button
} else if (mini instanceof g.Map && !pano.getVisible()) {
mapdiv.removeChild(document.getElementById("minimap"));
**//initialize(); if try call initialize again pegman back default position but map back to default position too like the first time.and markers hide , i don't know why this happens**
}
});
/////////////////////////
mgr = new MarkerManager( map );
google.maps.event.addListener(mgr, 'loaded', function() {
if (markers) {
for (var level in markers) {
google.maps.event.addDomListener( document.getElementById( level ), 'click', function() {
setCategoryVisiblity( this.id, this.checked );
});
for (var i = 0; i < markers[level].length; i++) {
var details = markers[level][i];
var image = new google.maps.MarkerImage(details.icons,new google.maps.Size(PIN_POINT_ICON_WIDTH, PIN_POINT_ICON_HEIGHT));
var myLatLng = new google.maps.LatLng(details.location[0], details.location[1]);
<?php if(get_current_city_set_zooming_opt() == '1') { ?>
multimarkerdata[i] = new google.maps.LatLng(details.location[0], details.location[1]);
<?php } ?>
markers[level][i] = new google.maps.Marker({
title: details.name,
position: myLatLng,
icon: image,
clickable: true,
draggable: false,
flat: true,
animation: google.maps.Animation.DROP
});
attachMessage(markers[level][i], details.message);
}
mgr.addMarkers( markers[level], 0 );
}
<?php if(get_current_city_set_zooming_opt() == '1') { ?>
var latlngbounds = new google.maps.LatLngBounds();
for ( var j = 0; j < multimarkerdata.length; j++ )
{
latlngbounds.extend( multimarkerdata[ j ] );
}
map.fitBounds( latlngbounds );
<?php } ?>
mgr.refresh();
}
});
// but that message is not within the marker's instance data
function attachMessage(marker, msg) {
var myEventListener = google.maps.event.addListener(marker, 'click', function() {
if (pano.getVisible()) {
infowindow.open(pano, marker);
} else {
infowindow = new google.maps.InfoWindow(
{ content: String(msg)
});
infowindow.open(map, marker);
}
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow(
{ content: String(msg)
});
infowindow.open(map,marker);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Not entirely sure why the current code is not working, but I'm also a little skeptic on the approach you're taking in the current code. Why not make a separate div for the panorama (streetview) and do some styling to the map_canvas div to replicate your current method (instead of using the minimap div). I've created a basis in this jsfiddle ( http://jsfiddle.net/svigna/FnrbX/embedded/result/ and http://jsfiddle.net/svigna/FnrbX/ for source code) that you can check out and possible use as a foundation for your solution.
Allow me to walk you through my code - with a little bit of looking into the streetView class properties and jquery I'm sure your question could be solved.
<body onload="initialize()">
<div id="container">
<div id="map_canvas" class="bigmap"></div>
<div id="pano" class="bigmap" style="display:none"></div>
</div>
first thing is first, in the mark-up we want to declare a div for the map and a div for the panorama, which will be bound to the map. We declare it in a container for styling purposes (when we want to overlap the map over the panorama). Notice the style of the panorama is initially set to display:none otherwise you'll be seeing a grayed out region (which is the pano without any location data because the pegman is not set).
#container {
width: 940px;
height: 640px;
position: relative;
}
#map_canvas,
#pano {
position: absolute;
top: 0;
left: 0;
}
#map_canvas {
z-index: 10;
}
.bigmap{
width:100%;
height:100%;
}
.minimap{
width:480px;
height:320px;
}
The styling here is essentially set to make it possible for the map_canvas div to overlap over the pano div when the pegman gets dropped. I used the concept from this solution for div overlapping ( How to overlay one div over another div). The .minimap and .bigmap classes make it easy to switch the map_canvas from one view to another, which will make more sense in the javascript section below.
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var panoramaOptions = {
enableCloseButton : true,
visible: false
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetView : panorama
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
up to this point in the javascript we initialize all the map contents. it is pretty self explanatory, to look into the properties that are set in here have a look at the google maps api v3 reference - i found it to be very useful.
google.maps.event.addListener(panorama, "visible_changed", function() {
if (panorama.getVisible() && $("#pano").is(':visible')){
//moving the pegman around the map
}else if(panorama.getVisible() && $("#pano").is(':hidden')){
$("#pano").show();
$("#map_canvas").removeClass('bigmap');
$("#map_canvas").addClass('minimap');
}
google.maps.event.addListener(panorama, "closeclick", function() {
$("#pano").hide();
$("#map_canvas").removeClass('minimap');
$("#map_canvas").addClass('bigmap');
});
});
}
Note: the event listeners are still declared in the initialize() function. But essentially we listen for a change in the panorama visibility, but that alone is not enough to determine if there is actual data in the pano div element. Remember when we set the pano div display to none, well we can use jquery to check for the visibility. If it's visible, that means it is NOT the initial drop of the pegman - if it's hidden then that's where we change the class of the map_canvas to minimap. Also note that we listen for the closeclick in the "visible_changed" listener. This is because visible_changed also includes the closeclick action, so by putting it inside we're binding the listener to the other. Once the closeclick is triggered, we hide the pano div and change the map_canvas back to it's normal size.
The great thing about this approach is the native "closeclick" action on the streetView removes the pegman from the map it's set to and returns it back to normal (which is what you wanted in your problem). Also, to go back to your original position you can simply do a map.panTo() on the "closeclick" event listener to the initial location.
I hope this what you were looking for, if it's far off then my apologies! I know it's essentially asking you to redesign your current code structure - but just thought this approach was much simpler and seems to do the same thing you want done.