jQuery UI dialog with google map works only once

Question

I have a google map embedded in a jQuery UI dialog.

It works as expected, but only once, until the page is refreshed.

Here's what happens:

1. The user clicks on a link, the popup opens and the map (of Pavlodar!) is loaded
2. The user closes the popup
3. The user clicks on the link again: the popup opens, it says "Google" in the bottom left, but the map area remains empty.
4. the user refreshes the page and everything is back to normal.

Here's my function:

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

    });
});

I wonder if this is not just some limitation on Google's end, or there is something wrong with my code.

Any idea what the problem might be?

Answer 1

Since you are using the same div for map and dialog .The dialog call might be interfering with map try initializing map after dialog appears

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