Autor Zpráva
matata8611
Profil
AHoj,
mohu poprosit:
mám mapu
<section class="no-padding hidden-print" id="portfolio">
        <div class="container-fluid">
            <div class="row no-gutter">
                <div class="hidden-xs text-center">
                <style >           
            #map-container {
                width: 100%;
            }
            #map {
                width: 100%;
                height: 600px;
            }
            #map.full {
                width: 100%;
                height: 100%;
                position:absolute
            }
        </style>
     <div id="map-container"><div id="map"></div></div>
                </div>
            </div>
        </div>
    </section>  

Vše funguje, pokud section#portfolio skryji pomoci css a potom ho chci zobrazit
<div class="well hidden text-center">
                    <a href="#portfolio" type="submit" title="Vyhledat" class="btn btn-primary page-scroll" id="mapbutton"><i class="fa fa-lg fa-map-o"></i>  Zobrazit mapu</a>
                    <script>
                     jQuery( "#mapbutton" ).click(function() {
                    jQuery( "#portfolio" ).fadeIn();
                    });
                    </script>
                    </div>
Zobrazí se pouze sedy obdelnik a mapa se nenacte... Poradite prosím?
Kcko
Profil
Vyhod ji z toho CSS, které ji schovává a pokud ji potřebujes zobrazit až po kliku na button tak ji schovej javascriptem a pak tedy zobraz = neschovavej ji CSSkem ale Javascriptem po načtení ...
matata8611
Profil
Presne to jsem už zkoušel. Resp. Tak se jsem pomoci js přidal po načtení #portfolio třídu hidden. Jak to udělat lépe prosim. Ideálně jQuery.
Monkeys
Profil *
matata8611:

Skus zavolat po kliknuti funkciu initialize ktora sa stara o zobrazenie mapy.

jQuery( "#mapbutton" ).click(function() {
 jQuery( "#portfolio" ).fadeIn();
 google.maps.event.addDomListener(window, 'click', initialize);
});

neskusal som ale prve co ma napadlo.

M.


pripadne to mozes voalt aj z fadeIn

neako takto:

jQuery( "#mapbutton" ).click(function() {
 jQuery( "#portfolio" ).fadeIn(function(){
  google.maps.event.addDomListener(window, 'click', initialize);
 });

});
matata8611
Profil
bohuzel nefunguje..

mama skryti
<script type="text/javascript">
          jQuery(document).ready(function () {
            jQuery("#portfolio").hide();    // just add this
        });
</script>


a zobrazeni
<script>
                    jQuery( "#mapbutton" ).click(function() {
                     jQuery( "#portfolio" ).fadeIn(function(){
                      google.maps.event.addDomListener(window, 'click', initialize);
                     });
                    });
                    </script>


ale porad se zobrazuje prazdny obdelnik bez mapy
Chamurappi
Profil
Reaguji na matatu8611:
pokud section#portfolio skryji pomoci css
Jakým způsobem ho skrýváš? Mapové API si potřebuje změřit rozměry a element s display: none je má nulové.
Řešením je nepoužívat display: none, ale třeba visibility: hidden (s případným absolutním odpozicováním do tramtárie).
matata8611
Profil
tak pokud dam portfolio
#portfolio {
    visibility:hidden;
    position:absolute;
    
    }


a js

<script>
                    jQuery( "#mapbutton" ).click(function() {
                    jQuery("#portfolio").css("visibility", "visible");
                    jQuery("#portfolio").css("position", "relative");
                    });
                    </script>


Tak se to zobrazi zase divne
joe
Profil
Nech zobrazit mapu až tehdy, kdy ji bude uživatel potřebovat. Pokud ta akce je vázaná na stisk tlačítka, vytvářej mapu až při kliknutí.

Samozřejmě to jde udělat i teď jak to máš (viz níž), ale lepší je první varianta (načítáš mapu až tehdy, kdy ji opravdu potřebuješ).

Stačí provést resize mapy

google.maps.event.trigger(map, "resize");

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: