jQuery UI Button as Google Maps API (v3) Custom Control

I'd like to use a jQuery UI button as a custom control in Google Maps API (v3), but I'm having some trouble. All I get on my map is a plain old HTML push button without any jQuery styling. My guess is that when the jQuery UI button() method is called, the 'div' containing my custom control button has not yet been attached to the DOM. Here is a code snippet containing the basic implementation that I'm trying to achieve:

<!-- GOOGLE MAPS API -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<!-- CUSTOM JQUERY UI -->
<link type="text/css" href="../jquery-ui-1.8.14.custom/css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet" />
<script type="text/javascript" src="../jquery-ui-1.8.14.custom/js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="../jquery-ui-1.8.14.custom/js/jquery-ui-1.8.14.custom.min.js"></script>

<script>
    $(document).ready(function() {
        var map = new google.maps.Map(document.getElementById("map_canvas"), {
            center: new google.maps.LatLng(0, 0),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var controlDiv = document.createElement('div');
        var controlButton = document.createElement('button');
        controlButton.innerHTML = 'Control Button';         
        controlDiv.appendChild(controlButton);

        // Add 'div' containing button to MVCArray in desired position on map
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
        $('button').button();
    });
</script>

In my Info Windows, I'm building jQuery Tabs after the 'domready' event has been fired. I'm wondering if there's anything similar for building custom map controls. Or is there some other trick to get this to work? 开发者_JS百科Any help or suggestions would be appreciated, thanks!

Update 7/22/11

I tried fooling around with the MVCArray 'insert_at' event by modifying the lines of code from above:

map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
$('button').button();

to the following:

google.maps.event.addListener(map.controls[google.maps.ControlPosition.RIGHT_BOTTOM], 'insert_at', function() {
    $('button').button();
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].insertAt(map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].length, controlDiv);

This method is a bit more clumsy, but it seemed like a way to delay calling the jQuery button() method until after the the button element has been inserted into the map and attached to the DOM. Unfortunately, no luck. Still doesn't work. Probably some straightforward solution I'm missing!

Documentation for the insertAt() method and 'insert_at' event of the MVCArray class can be found here: http://code.google.com/apis/maps/documentation/javascript/reference.html#MVCArray