jMapping + .fadeIn nie wyświetla mapy

[rych54 0]

Cześć. Mam problem z mapą Google. Mianowicie za pomocą .fadeIn zrobiłem aby po kliknięciu na adres wyświetliła się mapa w topie strony. Skrypt wydaję mi się, że działa poprawnie, lecz mapa wyświetla się w ten sposób:

Błąd leży chyba po stronie Css ponieważ dla mapy w kodzie mam "display: none"

Czy ktoś wie z czym to może być problem?

Kod odpowiedzialny za adresy:

<div class="foto-contact"><div id="map"></div></div>

    <section class="branch">
    
    <div class="container">
     <div id="map-side-bar">
       <div class="row">
            <div class="col-md-3">
                <div class="map-location" data-jmapping="{id: 1, point: {lng: 2.632177,  lat: 48.826631}, category: 'company'}">
                  <a href="#" class="map-link">
                    <address>
                      <strong>ATE CROISSY-BEAUBOURG</strong><br>
                      5, rue Pelloutier<br>
                      77183 CROISSY-BEAUBOURG<br>
                      Tél: 09 63 62 74 34<br>
                     <a href="mailto:ateidf@orange.fr">ateidf@orange.fr</a> 
                    </address>
                  </a>
                  <div class="info-box">
                    <p>A great place to get all your groceries, especially fresh fruits and vegetables.</p>
                  </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="map-location" data-jmapping="{id: 2, point: {lng: 5.653325, lat: 45.536604}, category: 'company'}">
                  <a href="#" class="map-link">
                    <address>
                     <strong>SIEGE SOCIAL ATE</strong><br>
                     61 bis, Avenue de la Folatiére<br>
                     38480 PONT DE BEAUVOISIN<br>
                     Tél: 04 76 32 82 22<br>
                     <a href="mailto:atepont@wanadoo.fr">atepont@wanadoo.fr</a> 
                    </address>
                  </a>
                  <div class="info-box">
                    <p>A great place to get all your groceries, especially fresh fruits and vegetables.</p>
                  </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="map-location" data-jmapping="{id: 3, point: {lng: 5.628112, lat: 43.295388}, category: 'company'}">
                  <a href="#" class="map-link">
                    <address>
                     <strong>AGENCE SUD</strong><br>
                     380, av. du Garlaban - PA de Gemenos, 13420 GEMENOS<br>
                     Tél: 04 42 08 08 30<br>
                     <a href="mailto:atesud@wanadoo.fr">atesud@wanadoo.fr</a> 
                    </address>
                  </a>
                  <div class="info-box">
                    <p>A great place to get all your groceries, especially fresh fruits and vegetables.</p>
                  </div>
                </div>
            </div>
            <div class="col-md-3">
                <address>
                  <strong>Antene technique<br> NANCY</strong><br>
                  Tél: 06 43 72 80 85<br>
                </address>
             </div>
          </div>
          <div class="row">
            <div class="col-md-3">
                <address>
                  <strong>Antene technique<br> STRASBOURG</strong><br>
                  Tél: 06 38 81 70 50<br>
                </address>
             </div>

            <div class="col-md-3">
                <address>
                  <strong>Antene technique<br> NANTES</strong><br>
                  Tél: 06 16 53 10 22<br>
                </address>
             </div>
            <div class="col-md-3">
                <address>
                  <strong>Antene technique<br> TARBES</strong><br>
                  Tél: 06 31 58 51 34<br>
                </address>
            </div>
          </div>
      </div>
  </div> 

Skrypty

 <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/markermanager.js"></script>
    <script type="text/javascript" src="js/StyledMarker.js"></script>
    <script type="text/javascript" src="js/jquery.metadata.js"></script>
    <script type="text/javascript" src="js/jquery.jmapping.js"></script>
    <script>
        $(document).ready(function(){
        $(".map-link").click(function(){

        $("#map").fadeIn("fast");
        });
         
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
          $('#map').jMapping({

            map_config: {
              navigationControlOptions: {
                style: google.maps.NavigationControlStyle.DEFAULT
              },


               mapTypeId: google.maps.MapTypeId.ROADMAP,

             styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"off"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"}]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}]
            }

          });
        });
    </script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script type="text/javascript">
        //Add Hover effect to menus
        jQuery('ul.nav li.dropdown').hover(function() {
          jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn();
        }, function() {
          jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut();
        });
    </script>