I'm trying to put a google map in a collapsible set in a jquery mobile site I'm working on. The map skips when moved in the div but outside the div it behaves normally. Does anyone have a solution for this problem?

The code looks like this and it's inside a collapsible-set:

2. <div data-role="collapsible" data-collapsed="true">
3.         <h3>
4.             Navigation</h3>
5.         <div data-role="content" id="map_canvas" >
6.             <script type="text/javascript">
7. 
   
8.                 function initializeMap() {
9.                     var latlng = new google.maps.LatLng(64.135338, -21.89521);
10.                     var options = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.SATELLITE
11.                     };
12.                     var map = new google.maps.Map(document.getElementById("map_canvas"), options);
13.                     google.maps.event.trigger(map, 'resize');
14.                     var marker = new google.maps.Marker({
15.                         position: latlng,
16.                         map: map,
17.                         title: "Hello World!"
18.                     });
19.                     google.maps.event.trigger(map, 'resize');
20. 
    
21.                 };
22. 
    
23.                 $(function () {
24.                     initializeMap();
25. 
    
26. 
    
27.                 });  
28. 
    
29.     
30.             </script>
31.         </div>
32.     </div>