Skocz do zawartości
Zaloguj się, aby obserwować  
rych54

jMapping + .fadeIn nie wyświetla mapy

Polecane posty

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:

ea054bc015de3be7m.jpg

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>

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się

Zaloguj się, aby obserwować  

×