Several maps on one page does not work anymore (since 6.0.0)

[hannesbochmann]

If I have a page with several maps on it, only the first map will work. At least with The preview is broken for all other maps as the map container is only hidden for the first map. And all maps but the first are not loaded when the preview button is clicked. Everything is fine for the first map. This is because in gomapsext.preview.js querySelector() is used for .js-gme-preview and .js-gme-container. Actually querySelectorAll() should be used to iterate over all possible elements. The JS might be something like this:

/**
 *  add listener to load map
 */
document.addEventListener('DOMContentLoaded', () => {
    const links = document.querySelectorAll('.js-gme-show');
    const previews = document.querySelectorAll('.js-gme-preview');
    const mapContainers = document.querySelectorAll('.js-gme-container');
    const useCookies = previews[0] && previews[0].dataset.cookie === '1';

    if (useCookies && getCookie('tx_gomapsext_show_map')) {
        showMap();
    } else {
        mapContainers.forEach(mapContainer => {
            mapContainer.style.display = 'none';
        });

        links.forEach(link => {
            link.addEventListener('click', e => {
                e.preventDefault();
                showMap();
                if (useCookies) {
                    setCookie('tx_gomapsext_show_map', 1, '/');
                }
            });
        });
    }

    function showMap() {
        if (typeof google === 'undefined' || typeof google.maps === 'undefined') {
            const script = document.createElement('script');
            script.src = links[0].dataset.library;
            document.body.appendChild(script);
            mapContainers.forEach(mapContainer => {
                mapContainer.style.display = 'block';
            });
        }

        previews.forEach(preview => {
            preview.remove();
        });
    }

    function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) {
            return parts.pop().split(';').shift();
        }
    }

    function setCookie(name, value, path) {
        document.cookie = `${name}=${value}; path=${path}`;
    }
});

But this still doesn't solve all problems. The preview now works for all maps. But only the first map is loaded. This is because the extension of HTMLElement.prototype.gomapsext. The gomapsext.controller property of the current element gets set. On subsequent calls for other maps the gomapsext.controller is still set with the previous value. So the property seems to be shared over all elements. This is due to the nature of prototype I think. The JS might look like this wo have it working:

// create a new Google Map
let goMapsExtControllerStorage = {};

HTMLElement.prototype.gomapsext = function(gme) {
  if (!goMapsExtControllerStorage[id]) {
    goMapsExtControllerStorage[id] = new GoMapsExtController(this, gme);
  }
};

function getGoMapsExtControllerById(id) {
  return goMapsExtControllerStorage ? goMapsExtControllerStorage[id] : undefined;
}

// add global callback function, see https://developers.google.com/maps/documentation/javascript/overview#Loading_the_Maps_API
window.goMapsExtLoaded = function() {
  const maps = document.querySelectorAll('.js-map');
  maps.forEach(function (el) {
    getGoMapsExtControllerById(el.id).initialize();
  });
}

I will provide a PR with my changes.