Konflikt różnych wersji jquery

Cześć,

nie wiem jak podejść do rozwiązania problemu z jquery.
Na stronie umieściłem scrypt opóźniający ładowanie map googe.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="/wp-content/themes/2020-04/jquery.lazymap.js"></script>
<script>
        $('.map').lazymap({
            apiKey: '',
            culture: 'pl'
        });
    </script>

Mapa ładuje się i działa poprawnie, natomiast inne funkcjonalności nie działają poprawnie, np slidery, menu mobilne. Strona oparta jest na wordpress i sam szablon też używa swoją bibliotekę jquery. Stąd problem.

Nie potrafię sobie z tym poradzić. Zastanawiam się czy bibliotekę jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">

można zastąpić tą domyślną, podawaną przez szablon wordpressa.

Konsola pokazuje co poniżej.

Uncaught TypeError: Cannot read property 'concat' of undefined
    at custom.unified.js?ver=4.6.1:75
    at custom.unified.js?ver=4.6.1:75
    at Object.<anonymous> (custom.unified.js?ver=4.6.1:75)
    at Object.<anonymous> (custom.unified.js?ver=4.6.1:75)
    at n (custom.unified.js?ver=4.6.1:3)
    at Module.<anonymous> (custom.unified.js?ver=4.6.1:78)
    at n (custom.unified.js?ver=4.6.1:3)
    at custom.unified.js?ver=4.6.1:3
    at custom.unified.js?ver=4.6.1:3

Czy ktoś może mnie naprowadzić, co powinienem zrobić?

jesteś pewien, że to kwestia konfliktu wersji?

może tutaj jest błąd (bo np. robisz to za wcześnie, jak jeszcze nie ma dostępnego elementu .map. Gdzie umieszczasz ten kod? Na końcu czy na początku skryptu? W sekcji body, head?

        $('.map').lazymap({
            apiKey: '',
            culture: 'pl'
        });

Konsola pokazuje co poniżej.

Do celów debuggowania dobrze jest korzystać albo z niezminifikowanych wersji bibliotek albo z source map. Wtedy komunikaty błędów byłyby bardziej czytelne.

Oczywiście zminifikowane wersje bibliotek spełniają swoją rolę jak już robisz coś, co pójdzie na produkcję.

Pewny na 100% nie jestem, ponieważ powoli się uczę js i jquery. Natomiast po usunięciu kodu

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">

slider i menu mobilne zaczynają działać, niestety mapa przestaje.

Strona o której mówię to https://basispolska.pl/

Cały kod wygląda tak (szkoda że nie dodałem go w pierwszym poście) i jest umieszczony w body

 <div class="map" data-zoom="8" data-locations="[51.927297, 15.6141284], [52.4053717, 16.9219011], [51.1078096, 17.0293933]"></div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="/wp-content/themes/2020-04/jquery.lazymap.js"></script>
    <script>
        $('.map').lazymap({
            apiKey: '',
            culture: 'pl'
        });
    </script>

natomiast w head jest jquery z szablonu

<script type='text/javascript' src='https://basispolska.pl/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp' id='jquery-core-js'></script>

1.12 to niezły zabytek. Możesz próbować poprawić kod szablonu, żeby działał z nowszym jQuery, ale nie wiem czy nie prościej by było po prostu osadzić tej mapki w ramce skoro pewnie wymiary będą stałe. W ten sposób gmaps będzie sobie korzystało z jednej wersji jQuery, a cała reszta z tej drugiej.

A nie prościej napisać sobie własny aktywator do map w gołym JS na bazie IntersectionObserver albo i nawet korzystając ze zwykłego onscroll / onresize i sprawdzać, czy kontener mapy pojawił się w widocznym obszarze ekranu?

tak jak tu?

https://walterebert.com/blog/lazy-loading-google-maps-with-the-intersection-observer-api/

yacazg napisał(a):

tak jak tu?

Kopiuj

https://walterebert.com/blog/lazy-loading-google-maps-with-the-intersection-observer-api/

No to chyba nawet znalazłeś gotowca :)

ale chyba ta mapa daje miejsce tylko na jeden balonik, wnioskuje to po kodzie

var roemerberg = {lat: 50.110, lng: 8.682}

przecież tworzy element Marker:

new google.maps.Marker({
    position: roemerberg,
    map: map
  })
}

Tu tworzy raz, ale możesz z tego co pamiętam wiele markerów utworzyć i podawać inne parametry za każdym razem - ograniczeniem jest API dostarczone przez Google'a (które ma swoją dokumentację). Ogólnie w takich sytuacjach lepiej korzystać z czystego API, zamiast szukać skryptów po necie, które mogą się w każdej chwili zdezaktualizować albo korzystać z opuszczonych przez twórców wtyczek (ostatnia aktualizacja lazymap była 15 miesięcy temu https://github.com/ZioTino/jquery.lazymap ).

Owszem, może nie będziesz wszystkiego umieć za pierwszym razem, jak się uczysz JS dopiero i będziesz musiał wertować dodatkowo MDN.Tylko co z tego? Używając gotowych wtyczek tak samo nie będziesz wszystkiego umieć, plus będziesz miał utrudnione zadanie, bo będziesz musiał rozwiązywać problemy z wtyczkami, konfliktami itp.

Ja się zastanawiam, co ta wtyczka robi, bo wygląda jak typowa przeinżynierowana wtyczka do jQuery, która za pomocą długiego kodu próbuje zrobić coś, co można zrobić w kilkanaście linijek.