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

by Suvi Vignarajah

HTML

<head>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=&sensor=false">
</script>    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript">
    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);
    
       
    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');         
        });
    });        
  }
</script>
</head>
<body onload="initialize()"> 
<div id="container">
<div id="map_canvas" class="bigmap"></div>
<div id="pano" class="bigmap" style="display:none"></div>
</div>
</body>

CSS

#container {
    width:1080px;
    height: 720px;
    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;
}