TypeError: jQuery(...).gmap3 is not a function

[sadhana-homesfy]

No description provided.

[mlewis-everley]

Hi Sadhana

Could you provide a little more detail?

Is this happening in the CMS or via the front end of the site?

What version of SS? What other modules do you have installed?

As a summary glance, it looks like you may not be loading jquery before the google maps JS loads?

[ihor-lev]

Hi from 2020 :)

I just had a similar issue when I had to use a custom CMS for the website. It worked well for some time but started failing after some CMS changes. I realized that $.gmap3 became undefined. That's why the whole map was not rendered.

I managed to fix that with a manually controlled script loading.

<script>
    const loadJS = function (url, container, onLoadFn){
        const scriptTag = document.createElement('script');
        scriptTag.src = url;
        scriptTag.onload = onLoadFn;
        scriptTag.onreadystatechange = onLoadFn;

        container.appendChild(scriptTag);
    };

    $(document).ready(function() {
        loadJS('https://cdn.jsdelivr.net/gmap3/7.2.0/gmap3.min.js', document.body, function () {
            MyMap.init('.map-container');
        });
    });
</script>

I'm sure, it's not perfect. But in my situation with limited access to CMS functionality, this is quite good enough.