谷歌地圖的jQuery UI對話框只能工作一次

Question

我有一個嵌入在jQuery UI對話框中的谷歌地圖。

它按預期工作，但只有一次，直到頁面刷新。

這裏發生了什麼：

1. 一個鏈接，用戶點擊，在彈出的打開和地圖（巴甫洛達爾！）加載
2. 用戶關閉彈出的
3. 用戶點擊再次鏈接：彈出窗口打開，它在左下角顯示「Google」，但地圖區域保持空白。
4. 用戶刷新頁面，一切都變爲 恢復正常。

這裏是我的功能：

$(document).ready(function() { 

    //avoid conflict with bootstrap css tooltips 
    var bootstrapButton = $.fn.button.noConflict(); 
    $.fn.bootstrapBtn = bootstrapButton; 

    //button click event handler 
    $("#popMap").click(function (ev) { 

     //create map to draw address location 
     var pavlodar = {lat: 52.3200561, lng: 76.9082336}; 
     var map = new google.maps.Map(document.getElementById('mapcanvas'), { 
      zoom: 18, 
      center: pavlodar, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     //establish ideal sizes 
     var w = screen.width; 
     var h = screen.height; 
     if(w > h){ 
      var dw = w * 0.5; 
      var dh = h * 0.5; 
     } else { 
      var dw = w * 0.8; 
      var dh = h * 0.6; 
     } 

     // create the map point 
     var marker = new google.maps.Marker({ map: map, position: pavlodar }); 

     //calling the dialog 
     $("#mapcanvas").dialog({ title: "наше место нахождения", maxWidth: dw, maxHeight: dh, height: dh, width: dw, modal: false, position: { my: "center", at: "center", of: window }}); 

     //stop the browser interpreting the click 
     ev.preventDefault(); 
     ev.stopPropagation(); 

    }); 
}); 

我不知道這是不是隻是一些限制，對谷歌的結束，或者有什麼錯我的代碼。

任何想法可能是什麼問題？

Answer 1

由於您使用的地圖和對話.The對話框調用同一div可能與地圖進行干擾嘗試初始化地圖出現

$(function() { 
    function initializeDlgMap() { 
    var mapProp = { 
     center:new google.maps.LatLng(51.508742,-0.120850), 
     zoom:5, 
     mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 
    var map=new google.maps.Map(document.getElementById("mapcanvas"),mapProp); 
    } 

    //establish ideal sizes 
    var w = screen.width; 
    var h = screen.height; 
    if(w > h){ 
     var dw = w * 0.5; 
     var dh = h * 0.5; 
    } else { 
     var dw = w * 0.8; 
     var dh = h * 0.6; 
    } 

    dialog = $("#mapcanvas").dialog({ title: "наше место нахождения", maxWidth: dw, maxHeight: dh, height: dh, width: dw, modal: false, position: { my: "center", at: "center", of: window }, 
    open: function() { 
     initializeDlgMap(); 
    } 
    }); 

    $("#popMap").click(function() { 
    dialog.dialog("open"); 
    }); 
});