mapguesser/public/static/js/maps.js

(function () {
    var Maps = {
        descriptionDivs: null,

        addStaticMaps: function () {
            var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer');
            for (var i = 0; i < imgContainers.length; i++) {
                var imgContainer = imgContainers[i];

                var imgSrc = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' +
                    'scale=' + (window.devicePixelRatio >= 2 ? 2 : 1) + '&path=color:0x0000ff40|weight:3|fillcolor:0x0000ff20|' +
                    imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng + '|' +
                    imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundWestLng + '|' +
                    imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundEastLng + '|' +
                    imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundEastLng + '|' +
                    imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng +
                    '&key=' + GOOGLE_MAPS_JS_API_KEY;

                imgContainer.style.backgroundImage = 'url("' + imgSrc + '")';
            }
        },

        initializeDescriptionDivs: function () {
            Maps.descriptionDivs = document.getElementById('mapContainer').getElementsByClassName('description');

            for (var i = 0; i < Maps.descriptionDivs.length; i++) {
                var description = Maps.descriptionDivs[i];
                var boundingClientRect = description.getBoundingClientRect();

                description.defaultHeight = boundingClientRect.height;
            }
        },

        calculateDescriptionDivHeights: function () {
            var currentY;
            var rows = [];
            for (var i = 0; i < Maps.descriptionDivs.length; i++) {
                var description = Maps.descriptionDivs[i];
                var boundingClientRect = description.getBoundingClientRect();

                if (currentY !== boundingClientRect.y) {
                    rows.push([]);
                }

                rows[rows.length - 1].push(description);

                currentY = boundingClientRect.y;
            }

            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];

                var maxHeight = 0;
                for (var j = 0; j < row.length; j++) {
                    var description = row[j];

                    if (description.defaultHeight > maxHeight) {
                        maxHeight = description.defaultHeight;
                    }
                }

                for (var j = 0; j < row.length; j++) {
                    var description = row[j];

                    description.style.height = maxHeight + 'px';
                }
            }
        }
    };

    Maps.addStaticMaps();

    Maps.initializeDescriptionDivs();
    Maps.calculateDescriptionDivHeights();

    window.onresize = function () {
        Maps.calculateDescriptionDivHeights();
    };
})();