Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Google Maps a ukryty DIV

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

Google Maps a ukryty DIV

Post 19.11.2013, 14:59:28

Witam!

Chciałbym utworzyć na mojej stronie www okienko z mapką google które pojawi się po kliknięciu na przycisk. Używam do tego celu skryptu popEasy - http://thomasgrauer.com/popeasy/ - i jeśli chodzi o sam plugin to działa wyśmienicie niestety problem dotyczy samej mapki gdyż wyświetla się tylko część w lewym górnym rogu - reszta to szare tło.

Obrazek

Poczytałem co nie na zagranicznych forach i jest to dosyć częsty problem wynikający z tego że mapka jest umiejscowiona w ukrytym divie. Znalazłem coś takiego na necie jest to dokładnie ten sam problem co u mnie ale mój skrypt trochę się różni i nie jestem w stanie naprawić problemu:

http://blog.codebusters.pl/pl/entry/google-maps-w-ukrytym-div
http://stackoverflow.com/questions/11742839/showing-a-google-map-in-a-modal-created-with-twitter-bootstrap

Ogólnie chodzi o dodanie czegoś takiego do strony:

Kod: Zaznacz cały
$('#myModal').on('shown', function () {
    google.maps.event.trigger(map, "resize");
});


Niestety jestem zielony jeśli chodzi o JavaScript i Jquery i nie wiem gdzie dokładnie mam to dopisać.
Tak to wygląda na mojej stronie:

Kod: Zaznacz cały
<a href="#modalMap" class="mapTrigger modalLink"></a> // Otwiera okienko z mapą

<div class="modalOverlay"></div>

    <div id="modalMap" class="modal">
        <a href="#" class="modalClose"></a>
        <div id="googleMapModal"></div>  // div z mapą
    </div>


Skrypt Mapy:

Kod: Zaznacz cały
window.onload = function () {
   var styles = [
    {
        "featureType": "all",
        "elementType": "all",
        "stylers": [
            {
                "invert_lightness": true
            },
            {
                "saturation": 10
            },
            {
                "lightness": 30
            },
            {
                "gamma": 0.5
            },
            {
                "hue": "#435158"
            }
        ]
    }
];
var myLatlng = new google.maps.LatLng(49.981956, 20.060761);
var options = {
   mapTypeControlOptions: {
      mapTypeIds: ['Styled']
   },
   center: myLatlng,
   zoom: 17,
   disableDefaultUI: true,
   navigationControl: true,
   scrollwheel: false,   
   mapTypeId: 'Styled'
};
var div = document.getElementById('googleMapModal');
var map = new google.maps.Map(div, options);
var markerKTM = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'KTM Studio',
     icon: 'gfx/map_icon.png'
  });
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
}


Może ktoś wie gdzie jak zmodyfikować kod tak żeby to zaczeło działać byłbym mega wdzięczny bo męczę się z tym od wczoraj.

Pozdrawiam
pentabrain
Posty: 6
Dołączył(a): 19.11.2013

Re: Google Maps a ukryty DIV

Post 19.11.2013, 16:07:40

Myślę, że do modyfikacji jest kod, który inicjuje popupa, a nie kod pracujący z mapą. W „dokumentacji” skryptu, który używasz nie znalazłem nic, co by mogło pomóc. Szukałem jakiś callbacków wywoływanych przy otwieraniu i chowaniu popupa. Może Ty będziesz miał więcej szczęścia w szukaniu, czy skrypt popEasy coś takiego oferuje.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19645
Dołączył(a): 14.04.2002

Re: Google Maps a ukryty DIV

Post 19.11.2013, 17:27:13

kuku napisał(a):Myślę, że do modyfikacji jest kod, który inicjuje popupa, a nie kod pracujący z mapą. W „dokumentacji” skryptu, który używasz nie znalazłem nic, co by mogło pomóc. Szukałem jakiś callbacków wywoływanych przy otwieraniu i chowaniu popupa. Może Ty będziesz miał więcej szczęścia w szukaniu, czy skrypt popEasy coś takiego oferuje.


Właśnie nie w tym rzecz. Niezależnie od użytego pluginu problem jest ten sam bo zależy on od tego że div który zawiera mape jest domyślnie ukryty. Otwórz link do pierwszego artykułu tego na codebusters.pl i tam jest dokładnie opisany ten problem jest też napisane co należy dodać do samego skryptu mapy ale sam nie potrafię zmodyfikować tego skryptu żeby to działało tak jak należy. Jakieś sugestie?
pentabrain
Posty: 6
Dołączył(a): 19.11.2013

Re: Google Maps a ukryty DIV

Post 19.11.2013, 18:49:39

Ja wiem, bo też się spotkałem z tym problemem w przeszłości. Co trzeba zrobić, to w momencie, gdy DIV z mapą będzie widoczny wywołać
Kod: Zaznacz cały
google.maps.event.trigger(map, "resize");

ale, żeby wiedzieć, kiedy DIV stanie się widoczny, to trzeba nasłuchiwać na coś. A tym idealnym czymś jest callback skryptu popupów wywoływany, gdy popup jest pokazywany. Zauważ, że przykład ze StackOverflow bazuje na oknach modalnych z frameworka Bootstrap, który generuje zdarzenie "shown", gdy otwarł się popup.
W Twoim skrypcie nie widzę żadnego takiego callbacka…

dlatego innym sposobem jest puszczenie timera (setInterval), który będzie sprawdzał co kilka(dziesiąt/set) milisekund, czy DIV jest widoczny i wywoływał wspomniane wyżej zdarzenie na mapie. Rozwiązanie dalekie od optymalnego, ale od biedy można użyć.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19645
Dołączył(a): 14.04.2002

Re: Google Maps a ukryty DIV

Post 19.11.2013, 20:49:13

Ok trochę mi to rozjaśniłeś :)

Ale dalej nie wiem co mam napisać, bo jak wspomniałem JavaScriptu dopiero się uczę a JQuery to dla mnie czarna magia póki co. Bardzo skomplikowane jest napisanie skryptu o którym wspominasz?
pentabrain
Posty: 6
Dołączył(a): 19.11.2013

Re: Google Maps a ukryty DIV

Post 19.11.2013, 21:07:33

Powiedzmy tak, jeśli nie przeszkadza ci edytowanie skryptu do popupów, to otwórz plik jquery.modal.js (jeśli korzystasz na stronie z wersji .min.js, to będziesz musiał go zmienić. Tam znajdź linie

Kod: Zaznacz cały
if(isopen===false){
                olay.css({opacity : options.opacity, backgroundColor: '#'+options.background});
                olay[options.animationEffect](options.animationSpeed);
                currentModal.delay(options.animationSpeed)[options.animationEffect](options.animationSpeed, function () {
});
            }else{
                currentModal.show();
            }

i zastąp je poniższymi

Kod: Zaznacz cały
if(isopen===false){
                olay.css({opacity : options.opacity, backgroundColor: '#'+options.background});
                olay[options.animationEffect](options.animationSpeed);
                currentModal.delay(options.animationSpeed)[options.animationEffect](options.animationSpeed, function () {
$(currentModal).trigger("shown.popeasy");
});
            }else{
                currentModal.show();
$(currentModal).trigger("shown.popeasy");
            }


potem w kodzie mapy wstaw zaraz pod linią

Kod: Zaznacz cały
map.mapTypes.set('Styled', styledMapType);

poniższe
Kod: Zaznacz cały
jQuery(function ($) {
    $("#modalMap").on("shown.popeasy", function () {
        google.maps.event.trigger(map, "resize");
    });
});
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19645
Dołączył(a): 14.04.2002

Re: Google Maps a ukryty DIV

Post 19.11.2013, 21:26:02

Stary nie wiem jak to zrobiłeś ale jesteś mistrzem :D :D
Masz u mnie kratę browarów :)

Został jeszcze ostatni problem jeśli masz jeszcze siły :) Mianowicie srodek mapy czyli tam gdzie mam ikonke ktora wskazuje lokalizacje

Kod: Zaznacz cały
var markerKTM = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'KTM Studio',
     icon: 'gfx/map_icon.png'
  });


jest umiejscowiony w lewym górnym rogu i go nie widać - mówiąc w skrócie to co ma być wyświetlane na środku przesuneło mi się do lewego górnego rogu. Wiesz może gdzie będzie leżeć przyczyna?

Z góry dzięki
pentabrain
Posty: 6
Dołączył(a): 19.11.2013

Re: Google Maps a ukryty DIV

Post 19.11.2013, 21:50:08

Zmień ten kod
Kod: Zaznacz cały
jQuery(function ($) {
    $("#modalMap").on("shown.popeasy", function () {
        google.maps.event.trigger(map, "resize");
    });
});

na
Kod: Zaznacz cały
jQuery(function ($) {
    $("#modalMap").on("shown.popeasy", function () {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });
});

mam nadzieję, że pomoże
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19645
Dołączył(a): 14.04.2002

Re: Google Maps a ukryty DIV

Post 19.11.2013, 21:56:41

Pomogło :D
Naprawdę nie wiem jak Ci dziękować.

Jak coś to temat do zamknięcia.
pentabrain
Posty: 6
Dołączył(a): 19.11.2013


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 2 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50709 zarejestrowanych użytkowników.
Najnowszy użytkownik: VZKKathl


Nasi użytkownicy napisali:

  • 936107 wiadomości
  • w 246731 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)