Map test
.map-embed-container {
width: 100%;
max-width: 100%;
margin: 2rem auto;
padding: 0;
}
.map-embed-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%;
background: #f0f0f0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.map-embed-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.map-fullscreen-btn {
position: absolute;
top: 10px;
right: 10px;
z-index: 1000;
background: white;
border: none;
border-radius: 4px;
padding: 8px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.map-fullscreen-btn:hover {
background: #f5f5f5;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
.map-fullscreen-btn:active {
transform: scale(0.95);
}
.map-embed-wrapper.fullscreen {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
padding-bottom: 0 !important;
z-index: 999999 !important;
border-radius: 0 !important;
margin: 0 !important;
}
.map-embed-wrapper.fullscreen iframe {
border-radius: 0;
}
@media (max-width: 768px) {
.map-embed-container {
margin: 1rem auto;
}
.map-embed-wrapper {
padding-bottom: 75%;
border-radius: 4px;
}
.map-fullscreen-btn {
top: 8px;
right: 8px;
padding: 6px;
}
}
@media (max-width: 480px) {
.map-embed-wrapper {
padding-bottom: 100%;
}
}
.map-embed-wrapper::before {
content: ‘Loading map…’;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #666;
font-size: 1rem;
z-index: 1;
}
.map-embed-wrapper iframe[src] ~ .map-embed-wrapper::before {
display: none;
}
function toggleMapFullscreen() {
const wrapper = document.querySelector(‘.map-embed-wrapper’);
const btn = document.querySelector(‘.map-fullscreen-btn’);
const fullscreenIcon = btn.querySelector(‘.fullscreen-icon’);
const exitFullscreenIcon = btn.querySelector(‘.exit-fullscreen-icon’);
if (!wrapper.classList.contains(‘fullscreen’)) {
wrapper.classList.add(‘fullscreen’);
fullscreenIcon.style.display = ‘none’;
exitFullscreenIcon.style.display = ‘block’;
document.body.style.overflow = ‘hidden’;
} else {
wrapper.classList.remove(‘fullscreen’);
fullscreenIcon.style.display = ‘block’;
exitFullscreenIcon.style.display = ‘none’;
document.body.style.overflow = ”;
}
}
document.addEventListener(‘keydown’, function(e) {
if (e.key === ‘Escape’) {
const wrapper = document.querySelector(‘.map-embed-wrapper’);
if (wrapper && wrapper.classList.contains(‘fullscreen’)) {
toggleMapFullscreen();
}
}
});
window.addEventListener(‘resize’, function() {
const wrapper = document.querySelector(‘.map-embed-wrapper’);
if (wrapper && wrapper.classList.contains(‘fullscreen’)) {
wrapper.style.height = window.innerHeight + ‘px’;
}
});
SHAUN RATCLIFF 