带有谷歌地图的 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

由于您对地图和对话框使用相同的 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" );
  });
});