Google Maps API Street View not resizing on modal

Question

I am outputting a street view map on a modal. Currently it will only display black until the window is resized. I have attempted to use the google.maps.event.trigger(map, "resize"); method on button click but can't seem to get it to work.

$("#myBtn").on( 'click', function(){
    google.maps.event.trigger(map, "resize"); //Tried to resize here on button click.
 });

See jsFiddle

Answer 1

Your trying to load map on page load and show it on button click which is not a good idea! instead you can load map on button click so that map will adjust according to available view port.

$("#myBtn").on( 'click', function(){
   if(map == null){
     $('.google-map-street').each(function(){
        // create map
        map = new_map( $(this) );
     });
   }
});

See this updated jsFiddle