diff --git a/public/static/css/maps.css b/public/static/css/maps.css index 7d51384..c29284f 100644 --- a/public/static/css/maps.css +++ b/public/static/css/maps.css @@ -29,12 +29,10 @@ 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 { diff --git a/views/maps.php b/views/maps.php index 842d428..5c143fb 100644 --- a/views/maps.php +++ b/views/maps.php @@ -67,16 +67,13 @@ $cssFiles = [ for (var i = 0; i < imgContainers.length; i++) { var imgContainer = imgContainers[i]; - var img = document.createElement('img'); - - img.src = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' + + 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; - img.alt = 'Map area'; - imgContainer.appendChild(img); + imgContainer.style.backgroundImage = 'url("' + imgSrc + '")'; } })();