Google Maps APIストリートビューはモーダルでサイズ変更されません

Question

モーダルでストリートビューマップを出力しています。現在は、ウィンドウのサイズが変更されるまで黒く表示されます。私はボタンクリックでgoogle.maps.event.trigger(map, "resize");メソッドを使用しようとしましたが、動作させるように見えません。

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

jsFiddle

Answer 1

あなたは、ページの読み込みにマップをロードし、良いアイデアではありませんボタンのクリックでそれを表示しようとしているを参照してください！代わりに、マップを使用可能なビューポートに従って調整するように、ボタンクリック時にマップをロードできます。

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

それを行って、この更新jsFiddle