jQuery Forum

Pictured above are three tabs made with jquery. The third (which is opened in the picture) contains an embedded Google Map. The empty red rectangle is the location where the map should appear. The above error is only present in Safari, I couldn't replicate it in any other browser.

The map is wrapped inside a div called

1. <h3 id="pasek3"><a href="#"></a></h3> // third panel
   <div id="content_wrap">
   <div id="podPaskiem3"> // under the panel
   <p id="lewo1"> // left half
   CONTACT/ADRESS DETAILS
   </p>
   <p id="prawo2"> // right half
   <div id="mapCanvas"></div>
   </p>
   </p>
   </div>
   </div>
   <!--content_wrap--></div >

These are that divs properties

1.       #mapCanvas {
2.       border:  0;
3.       width:  500px;
4.       height:  350px;
5.       margin:  0 auto;
6.   }

Here is the script responsible for displaying and centering the map once the third map is opened:

1. <script>
2. var map = null; 
3. var latlng = new google.maps.LatLng(52.2729782, 20.9861867);
4. function initializeMap() {
5.     var myOptions = {
6.         zoom: 15,
7.         center: latlng,
8.         mapTypeId: google.maps.MapTypeId.ROADMAP
9.     };
10.     return new google.maps.Map($('#mapCanvas')[0], myOptions);
11. }
12.     // Function for adding a marker to the page.
13.     function addMarker(location) {
14.         marker = new google.maps.Marker({
15.             position: location,
16.             map: map
17.         });
18.     }
19.     // Testing the addMarker function
20.     function TestMarker() {
21.            CentralPark = new google.maps.LatLng(52.2729782, 20.9861867);
22.            addMarker(CentralPark);
23.     }
24. $(document).ready(function() {
25.     $("#accordion").accordion();
26.    
27.     $("#accordion").bind('accordionchange', function(event, ui) {
28.         if (ui.newContent.attr('id') == 'content_wrap' && !map)
29.         {
30.             map = initializeMap();
31.                  TestMarker();
32.         }
33.     });
34. });
35.   </script>

         
In case you have stumbled upon this thread looking for a solution to an issue with Google Map displaying/centering, here is what worked for me http://www.essentialwebconcepts.com/blog/2011/03/22/fixing-google-maps-rendering-problem-in-jquery-accordion/
the above does not adrress my question, it's an answer to different question