Googleマップを使用したjQuery UIダイアログは一度しか動作しません

Question

jQuery UIダイアログにGoogleマップが埋め込まれています。

期待どおりに動作しますが、ページがリフレッシュされるまで1回だけ動作します。ここで

は何が起こるかです：（！パブロダルの）リンク上

1. ユーザーがクリックすると、ポップアップが開き、マップ
2. ロードされているユーザーは、ユーザーがクリックポップアップ
3. を閉じ再びリンク：ポップアップが開き、左下に「Google」と表示されますが、地図の領域は空のままです。
4. ユーザーがページを更新し、すべて正常に戻る です。これは、Googleの最後にはいくつかの制限ではないか、私のコードに何か問題がある場合、私は疑問に思う

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