title: How do I fix drag and drop for a Google map (v2) inside a JQuery Dialog (1.4.2, 1.8.5)?
body: <p>Dragging and dropping a marker on a Google Map inside a modal JQuery dialog isn't working properly using JQuery 1.4.3 and JQuery-UI 1.8.5.  </p>
  
  <p>The following snippet is reproducing the issue in Chrome 6.0 and Firefox 3.6.10 (but not Opera 10.63 which surprisingly doesn't have the problem), and this was working before upgrading JQuery (from 1.3.x and JQuery-UI 1.7.x as far as I can remember.)</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  
    &lt;head&gt;
  
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
  
      &lt;script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"&gt;&lt;/script&gt;
  
      &lt;script language="javascript" type="text/javascript" src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAA7wvJIKWNmIHy1Zz-OBol4hRU04i6YYXAaKMufrGA2zKwYVdFjhQttL37dNm-ct8ZuquPxt-MCn7PIw"&gt;&lt;/script&gt;
  
      &lt;style type="text/css"&gt; .ui-dialog { border:8px solid #ccc; } .ui-dialog-titlebar { border-bottom: 2px solid #ccc; padding: 4px; } .ui-dialog-titlebar a { display: none; } &lt;/style&gt;
  
    &lt;/head&gt;
  
    &lt;body onunload="GUnload();"&gt;
  
      &lt;a href="#" class="open modal"&gt;Open modal&lt;/a&gt;
  
      &lt;a href="#" class="open"&gt;Open non-modal&lt;/a&gt;
  
  
  
      &lt;div id="popup" style="display:none;text-align:left;padding: 4px;"&gt;
  
        &lt;div id="map" class="map" style="width:400px;height:300px;"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
  
        $(function(){
  
          $(".open").click(function(){
  
            $("#popup").dialog({ modal:$(this).hasClass("modal"), // changing to false works ok
  
                                 title:"Drag marker", width:450, position: "center", 
  
                                 buttons: { "Cancel": function(){ $(this).dialog("close"); } },
  
                                 open: function() {
  
                                         var map = new GMap2(document.getElementById("map"));
  
                                         map.setCenter( new GLatLng(-37.851414,145.052686), 15);
  
                                         map.addOverlay(new GMarker(new GPoint(145.052686, -37.851414), {draggable:true}));
  
                                       }
  
                                });
  
          }).eq(0).click();
  
        });
  
      &lt;/script&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Note, the styling is minimal as I couldn't find a quick CDN link to JQuery-UI CSS/image files.</p>
  
  <p>Using the above, when opening the dialog with <code>modal:true</code>, the marker (and sometimes the map) will get "stuck" to the mouse, i.e. the mouseup event isn't caught. Clicking/moving quickly will sometimes drop it again, but usually you have to press escape to close the dialog.</p>
  
  <p>Opening with <code>modal:false</code> allows the marker to be dragged normally.</p>
  
  <p>Is there any way to fix this without having to make the dialog non-modal?</p>
  
  <p>I found this, <a href="http://forum.jquery.com/topic/modal-dialog-and-google-maps" rel="nofollow">http://forum.jquery.com/topic/modal-dialog-and-google-maps</a>, which seems to be the same problem, but I can't figure out how to apply the answer suggested. I've tried adding <code>z-index:1000</code> to the <code>div.map</code> but it didn't help.</p>