$(document).ready(function () {
    var map = document.getElementsByClassName('map');
    var googleMap = document.getElementsByClassName('djangocms-googlemap');

    if (map.length > 0) {
        map = map[0];

        if (googleMap.length > 0) {
            googleMap = googleMap[0];
            map.appendChild(googleMap);
        } else {
            console.error('Please, add google map and google marker plugin.')
        }
    }
    
    function BindMarkers(markers, marker_plugins) {
        for (let marker of markers) {
            for (let marker_plugin of marker_plugins) {
                if (marker.getAttribute('title') == marker_plugin.getAttribute('data-title')) {
                    let long = marker_plugin.getAttribute('data-lng');
                    let lat = marker_plugin.getAttribute('data-lat');

                    marker.addEventListener('click', function () {
                        window.location = 'https://www.google.com/maps/dir/?api=1&destination='+lat.toString()+'%2C'+long.toString();
                    });
                    marker.addEventListener('touchstart', function () {
                        window.location = 'https://www.google.com/maps/dir/?api=1&destination='+lat.toString()+'%2C'+long.toString();
                    });
                }
            }
        }
    }

    const timer = ms => new Promise(res => setTimeout(res, ms))
    var success = false;

    function FindMarkers(marker_plugins) {
        let markers = document.getElementsByTagName('area');
        if (markers.length == 0) {
            container = document.getElementsByClassName('js-djangocms-googlemap-container')[0];
            markers = []
            for (obj of marker_plugins) {
                marker = container.querySelector(`[title="${obj.getAttribute('data-title')}"]`);
                if (marker) {
                    markers.push(marker);
                }
            }
        }
        return markers
    }

    async function BindMarkersMain() {
        while (success != true) {
            var marker_plugins = document.getElementsByClassName('djangocms-googlemap-marker');
            var markers = FindMarkers(marker_plugins); //document.getElementsByTagName('area');
            if ((markers.length !== 0) && (marker_plugins.length !== 0)) {
                BindMarkers(markers, marker_plugins);
                success = true;
            }
            else {
                await timer(250)
            }
        }
    }

    BindMarkersMain();
});