diff --git a/public/static/css/maps.css b/public/static/css/maps.css index 7d51384..aeef091 100644 --- a/public/static/css/maps.css +++ b/public/static/css/maps.css @@ -29,17 +29,16 @@ div.mapItem>div.title>p.title { div.mapItem>div.imgContainer { width: 100%; padding-top: 50%; - background: #cccccc; -} - -div.mapItem>div.imgContainer>img { - width: 100%; - margin-top: -50% + background-color: #cccccc; + background-position: center; + background-repeat: no-repeat; + background-size: cover; } div.mapItem>div.inner { background-color: #eeeeee; padding: 10px 8px; + box-sizing: border-box; } div.mapItem>div.inner>div.info { diff --git a/views/maps.php b/views/maps.php index 842d428..3749e7d 100644 --- a/views/maps.php +++ b/views/maps.php @@ -63,21 +63,80 @@ $cssFiles = [ (function () { const GOOGLE_MAPS_JS_API_KEY = ''; - var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer'); - for (var i = 0; i < imgContainers.length; i++) { - var imgContainer = imgContainers[i]; + var Maps = { + innerDivs: null, - var img = document.createElement('img'); + addStaticMaps: function () { + var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer'); + for (var i = 0; i < imgContainers.length; i++) { + var imgContainer = imgContainers[i]; - img.src = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' + - 'scale=' + (window.devicePixelRatio >= 2 ? 2 : 1) + '&' + - 'visible=' + imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng + '|' + - imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundEastLng + - '&key=' + GOOGLE_MAPS_JS_API_KEY; - img.alt = 'Map area'; + var imgSrc = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' + + 'scale=' + (window.devicePixelRatio >= 2 ? 2 : 1) + '&' + + 'visible=' + imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng + '|' + + imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundEastLng + + '&key=' + GOOGLE_MAPS_JS_API_KEY; - imgContainer.appendChild(img); - } + imgContainer.style.backgroundImage = 'url("' + imgSrc + '")'; + } + }, + + initializeInnerDivs: function () { + Maps.innerDivs = document.getElementById('mapContainer').getElementsByClassName('inner'); + + for (var i = 0; i < Maps.innerDivs.length; i++) { + var inner = Maps.innerDivs[i]; + var boundingClientRect = inner.getBoundingClientRect(); + + inner.defaultHeight = boundingClientRect.height; + } + }, + + calculateInnerDivHeights: function () { + var currentY; + var rows = []; + for (var i = 0; i < Maps.innerDivs.length; i++) { + var inner = Maps.innerDivs[i]; + var boundingClientRect = inner.getBoundingClientRect(); + + if (currentY !== boundingClientRect.y) { + rows.push([]); + } + + rows[rows.length - 1].push(inner); + + 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 inner = row[j]; + + if (inner.defaultHeight > maxHeight) { + maxHeight = inner.defaultHeight; + } + } + + for (var j = 0; j < row.length; j++) { + var inner = row[j]; + + inner.style.height = maxHeight + 'px'; + } + } + } + }; + + Maps.addStaticMaps(); + + Maps.initializeInnerDivs(); + Maps.calculateInnerDivHeights(); + + window.onresize = function () { + Maps.calculateInnerDivHeights(); + }; })();