Google maps streeview issue

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.11&amp;sensor=false&amp;foo=.js"></script>
<div class="container">
    <div class="container" id="infocontainer" style=""><a href="#" class="btn btn-primary" id="thebutton" onclick="return false;">Click here</a></div>		  
  <div id="mapcontainer" class="container" style="position: relative">
  	<div class="container hero-unit" style="padding:0;">
				<div class="map-canvas panorama-disabled-map-canvas" id="map_canvas" style="height: 480px;"></div>
      	<div class="map-canvas panorama-disabled-panorama-canvas" id="panorama_canvas" style="height: 480px;"></div>
    </div>      
  </div>
  <div id="bottomcontainer" style="">        

  </div>      
  <div id="log"></div>    
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.map-canvas img {
    border: none !important;
    max-width: none !important;
}

.panorama-activated-map-canvas {
  width: 50%;
  float:left;
  -webkit-border-top-left-radius: 6px;
  -moz-border-top-left-radius: 6px;
  border-top-left-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-bottom-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.panorama-activated-panorama-canvas {
  width: 50%;
  float:left;
  -webkit-border-top-right-radius: 6px;
  -moz-border-top-right-radius: 6px;
  border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-bottom-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.panorama-disabled-map-canvas {
  width: 100%;
  border-radius: 6px 6px 6px 6px;
}

.panorama-disabled-panorama-canvas {
  display: none;
}

JavaScript

var data = "{success:true, data:{\"schoolMarker\":{\"lat\":62.759379214514,\"lng\":22.840391666132},\"polylines\":[{\"path\":[{\"lat\":62.768091219265,\"lng\":22.841507465082},{\"lat\":62.767678823231,\"lng\":22.841421634393},{\"lat\":62.767168229676,\"lng\":22.841292888361},{\"lat\":62.766569252889,\"lng\":22.840928107935},{\"lat\":62.765842608979,\"lng\":22.840456039148},{\"lat\":62.76528288457,\"lng\":22.839919597345},{\"lat\":62.764772249527,\"lng\":22.839576274591},{\"lat\":62.764340166815,\"lng\":22.839533359247},{\"lat\":62.764016100627,\"lng\":22.839490443903},{\"lat\":62.763623288351,\"lng\":22.839554816919},{\"lat\":62.762660876165,\"lng\":22.839919597345},{\"lat\":62.761885031233,\"lng\":22.840220004755},{\"lat\":62.761020774875,\"lng\":22.840498954492},{\"lat\":62.760303815724,\"lng\":22.840820819574},{\"lat\":62.759655591079,\"lng\":22.841035396295},{\"lat\":62.759439513032,\"lng\":22.840541869836}]}]}}";
var map = null;
var schoolmarker = null;
var polyBounds = null;
var panorama = null;
var streetViewService = null;
var g = google.maps;
var response = eval( "(" + data + ")" );
if (response.success) {
    initMap('#map_canvas', '#panorama_canvas', response.data);
}
function initMap(mapSelector, panoramaSelector, data) {
    var mapOptions = {
      scrollwheel: false,
      zoom: 5,
      minZoom: 5,
      streetViewControl: false,
      mapTypeControl: false,
      mapTypeControlOptions: {
        mapTypeIds: [g.MapTypeId.ROADMAP, g.MapTypeId.SATELLITE]
      },
      center: new g.LatLng(65.567, 25.303),
      mapTypeId: g.MapTypeId.ROADMAP,
      draggableCursor: 'auto',
      draggingCursor: 'move',
      disableDoubleClickZoom: true,
      scaleControl: true
    };
    map = new g.Map($(mapSelector).get(0), mapOptions);
    mapSelector = null;
    mapOptions = null;
    
    schoolmarker = new google.maps.Marker({
      animation: g.Animation.DROP,
      draggable: true,
      icon:...