Google Maps and jQuery UI Dialog Rendering Artifacts

Question

When displaying a Google Map in a jQuery UI dialog, if I drag the dialog around, it leaves rendering artifacts:

Is there anyway to prevent or fix this?

(Using Chrome 27.0.1453.110 m)

Answer 1

I can easily create a jquery-ui dialog with a map inside it that shows no artifacts on drag. It would be helpful if you created a small piece of sample code to recreate the issue. Here is a js fiddle to illustrate.

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("googleMap"),mapProp);
}
dialog = $( "#map-dialog" ).dialog({
  autoOpen: false,
  height: 400,
  width: 400,
  modal: true,
  buttons: {
    Cancel: function() {
      dialog.dialog( "close" );
    },
    Confirm: function() {
      dialog.dialog( "close" );
    }
  },
  open: function() {
    initializeDlgMap();
  }
});
$( "#show-map").click(function() {
  dialog.dialog( "open" );
});

I would have added this as a comment, but I don't have enough reputation points.