GMap in jQuery modal dialog problem - can't drop draggable markers

GMap in jQuery modal dialog problem - can't drop draggable markers

Hi,

I am using jQuery 1.4.2 with a custom jQuery UI 1.8.6 (from themeroller), and have ran into a problem with draggable GMap (GMaps API v2) markers in a modal dialog where I can pick up the marker with a mouse click but it appears that the mouse up event is lost so I can never drop it. If I change the dialog to modal: false, then the problem goes away. Here is my code:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    <link href="css/front.css" rel="stylesheet" type="text/css">
    <link href="css/custom-theme/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>Test</title>
    </head>
    <body>
        <!-- Test Dialog -->
        <div id="testDialog" title="Test" style="display:none">
            <div id="map"></div>
        </div>
    </body>

    <!-- My Google Maps key -->
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=FOOFOOFOO" type="text/javascript"></script>
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {       
            // Test dialog
            $("#testDialog").dialog({
                autoOpen: true,
                modal: true,
                width: 400,
                height: 300,
                buttons: {
                    Close: function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
           
            // Set up map
            var myMap = new GMap2(document.getElementById("map"), {size: new GSize(370,175), logoPassive: "true"});
            myMap.addControl( new GSmallMapControl() );
            myMap.setCenter(new GLatLng(54.7,-4), 5);
            var noteMarker = new GMarker(new GLatLng(54.7,-4), {draggable: true});
            myMap.addOverlay(noteMarker);
        });
    </script>









































Has anyone come across this before?

Richard