jquery - Bootstrap Tabs - streetview -

i came across great little script, loading gmap in bootstrap tabs, via stackoverflow.

the link: http://jsfiddle.net/b4zle/49/

i tried making necessary changes try , fire streetview tab, blank. kind soles please.

this gmap code ( map )

var map;  jquery(function($) { $(document).ready(function() {     var latlng = new google.maps.latlng(-16.920728, 145.769219);     var myoptions = {         zoom: 12,         center: latlng,         maptypeid: google.maps.maptypeid.roadmap     };     map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions);     console.dir(map);     google.maps.event.trigger(map, 'resize');      $('a[href="#themap"]').on('shown', function(e) {         google.maps.event.trigger(map, 'resize');     });      $('#mytab a[href="#themap"]').on('shown', function(){         google.maps.event.trigger(map, 'resize');         map.setcenter(latlng);     });     var contentstring = '<div id="iw_content">'+                             '<h4>16/63 mcleod street , cairns city</h4>'+                             '<div class="iw_content_block">qld 4870</div>'+                             '<div class="iw_content_block">more listings <a href="/agent/leona-bonsey-14/">leona bonsey</a></div>'                         '</div>';     var infowindow = new google.maps.infowindow({                             content: contentstring                         });     var iconbase = '/public/images/';                         var myshadow = {                           url: iconbase + 'shadow.png',                           anchor: new google.maps.point(16, 34)     };     var marker = new google.maps.marker({                             map: map,                             animation: google.maps.animation.drop,                             icon: iconbase + '422marker.png',                             shadow: myshadow,                             position: latlng,                             title: "16/63 mcleod street, cairns city, qld, 4870"     });     google.maps.event.addlistener(marker, 'click', function() {                           infowindow.open(map,marker);                         }); }); }); 

a demo can seen here http://www.422.com.au/property/apartment-qld-cairns+city-15032013172546

this have streetview map ( unsuccesfully loading streetview )

function initialize() {  var latlng = new google.maps.latlng(-16.920728, 145.769219);   var panoramaoptions = {     position: latlng,     pov: {       heading: 165,       pitch: 0     },     zoom: 1   };   var mypano = new google.maps.streetviewpanorama(       document.getelementbyid('street_canvas'),       panoramaoptions);   mypano.setvisible(true); } google.maps.event.adddomlistener(window, 'load', initialize); 

appreciate help.

the trick getting work waiting initialize map until tab shown. rather initializing map on load of window, call initialize inside of on('shown') of street view map tab.

check out fiddle:

var map;

$(document).ready(function() {     var latlng = new google.maps.latlng(-34.397, 150.644);     var myoptions = {         zoom: 8,         center: latlng,         maptypeid: google.maps.maptypeid.roadmap     };     map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions);      $('a[href="#map"]').on('shown', function(e) {         google.maps.event.trigger(map, 'resize');     });     $('a[href="#street"]').on('shown', function(e) {         initialize(); //call initialize here!     });  });  function initialize() {   var latlng = new google.maps.latlng(-16.920728, 145.769219);   var panoramaoptions = {     position: latlng,     pov: {       heading: 165,       pitch: 0     },     zoom : 1   };   var mypano = new google.maps.streetviewpanorama(     document.getelementbyid('street_canvas'),     panoramaoptions   );   mypano.setvisible(true); } 

http://jsfiddle.net/b4zle/167/