Диалог jQuery UI с картой google работает только один раз

Question

У меня есть карта google, встроенная в диалог интерфейса jQuery.

Работает так, как ожидалось, но только один раз, пока страница не обновится.

Вот что происходит:

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(); 

    }); 
}); 

Интересно, что это не просто какой-то ограничение на конец Google, или есть что-то случилось с моим кодом.

Любая идея, в чем проблема?

Answer 1

Поскольку вы используете один и тот же DIV для отображения и диалога диалога вызова .The может мешать карте попытаться инициализации карты после того, как появится диалоговое окно

$(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"); 
    }); 
});