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 - Info Window - problem z customizacją

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

Google Maps - Info Window - problem z customizacją

Post 09.01.2018, 23:16:44

Hej..

Tworzę pierwszy raz w javascripcie mapę google na stronie i mam już prawie wszystko czego potrzebuję ale.. chciałabym zrobić własne (graficznie) info-window. Tutaj też już sobie poradziłam, jednak muszę rodzicowi <div class="gm-style-iw"> nadać klasę aby usunąć wszystkie jego dzieci <div> poza właśnie tym z klasą "gm-style-iw", albo w jakiś inny sposób usunąć "rodzeństwo" tego diva. No i mam problem. Żaden mój pomysł nie zadziałał jak wpisuję element.parentNode to consola mi woła, że parenNode is undefined :-(

W jQuery to jest proste, ale javascript to dla mnie wyższa szkoła :-(

Ktoś pomoże?
feronek
Posty: 29
Dołączył(a): 21.03.2014

Re: Google Maps - Info Window - problem z customizacją

Post 09.01.2018, 23:43:44

Nie wiem czy dobrze Cię zrozumiałem. Chcesz usunąć dzieci diva z klasą "gm-style-iw"? Jeśli tak to możesz złapać ten div i po prostu go wyczyścić przy pomocy ".innerHTML".
QuakeR
Posty: 5
Dołączył(a): 28.08.2017

Re: Google Maps - Info Window - problem z customizacją

Post 10.01.2018, 00:04:50

Nieee.. chcę złapać divy rodzica diva z klasą gm-style-iw ale bez tegoż własnie diva i je usunąć. Wymyśliłam, że nadam klasę parentowi diva z klasą "gm-style-iw" i wówczas usunę sobie jego dzieci poza divem z klasą "gm-style-iw". W jQuery jest prosto bo mogę zastosować syblings a w javascript nie mam pojęcia jak to inaczej zrobić :-(
feronek
Posty: 29
Dołączył(a): 21.03.2014

Re: Google Maps - Info Window - problem z customizacją

Post 10.01.2018, 00:25:51

Przy użyciu parametru ".children" dla rodzica złapiesz wszystkie dzieci w NodeList, następnie przekonwertuj to do tablicy, później przy użyciu "forEach" sprawdź "!(element.className === "gm-style-iw")" jeśli tak to usuń te elementy.
QuakeR
Posty: 5
Dołączył(a): 28.08.2017

Re: Google Maps - Info Window - problem z customizacją

Post 10.01.2018, 15:52:23

No tak, to wiem tylko.. jak złapać rodzica? parentNode krzyczy mi, że undefined :-(
feronek
Posty: 29
Dołączył(a): 21.03.2014

Re: Google Maps - Info Window - problem z customizacją

Post 10.01.2018, 15:55:38

Co masz w zmiennej element? Widocznie nie jest to węzeł elementu, skoro nie ma parentNode. Możesz pokazać swój kod?

Poza tym, usuwanie elementów, które API map samo utworzyło może się skończyć źle, ponieważ API może trzymać do nich referencje i próbować na nich operować, co może skutkować niepoprawnym działaniem, błędami, itd.

PS. tutaj znalazlem całkiem przystępny tutorial jak zmienić wygląd InfoWindow… http://en.marnoto.com/2014/09/5-formas- ... indow.html może będzie pomocny.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

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

Re: Google Maps - Info Window - problem z customizacją

Post 10.01.2018, 23:08:13

Tak, widziałam go już, ale.. sęk w tym, że ja muszę usunąć całą defaultową ramkę z tłem i wstawić tam obrazek jako tło. Odnośnie tego, co chcę usunąć, to są to dwa divy zawierające właśnie tło (i jego cień) info-window. Nie sądzę, że po ich usunięciu generowało jakieś błędy, bo usunęłam je w jquery i jest ok. Sęk w tym, że cały skrypt jest w javascripcie (pure) więc to jquery jakoś głupio wygląda wewnątrz tego javascriptu.

Kod wygląda tak:

Kod: Zaznacz cały
<div style="cursor: default; position: absolute; width: 146px; height: 270px; left: 602px; top: -44px; z-index: -44;">
    <div style="position: absolute; left: 0px; top: 0px;">   
         <!-- tutaj jest kod do tła i ramki  -->     
    </div>
    <div class="gm-style-iw" style="top: 9px; position: absolute; left: 15px; width: 116px;">
        <!-- tutaj jest moje tło i adres -->
    </div>
    <div style="width: 13px; height: 13px; overflow: hidden; position: absolute; opacity: 0.7; right: 12px; top: 10px; z-index: 10000;">
          <!-- tutaj jest kod do cienia tła standardowego -->
    </div>
     <img alt="" src="https://maps.gstatic.com/mapfiles/transparent.png" draggable="false" style="width: 37px; height: 37px; user-select: none; border: 0px; padding: 0px; margin: 0px; position: absolute; right: 0px; top: -2px; z-index: 10001; cursor: pointer;">
</div>


I chodzi mi o to, żeby pierwszemu divowi który jest rodzicem nadać klasę, żeby móc później usunąć divy dzieci poza tym, który ma klasę gm-style-iw i obrazkiem. W jQuery udało mi się to zrobić dwoma liniami kodu. A w javascript mi nie wychodzi :-(
feronek
Posty: 29
Dołączył(a): 21.03.2014


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Google [Bot] i 5 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 51033 zarejestrowanych użytkowników.
Najnowszy użytkownik: AnnettOD


Nasi użytkownicy napisali:

  • 936623 wiadomości
  • w 246937 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)