Full-Width Map Footer Template

Make your location the star of the show with this immersive, full-width map footer.

Ideal for destination businesses, event venues, or real estate listings, this template uses a full-bleed map as a dramatic background, with your contact details and links elegantly overlaid on top.

Screenshot of a footer with a full-width map as the background and an info box with address and links overlaid.

Get Source Code Preview

About this Full-Width Map Footer Template

This footer breaks out of the traditional container to create a visually striking, full-width experience. By placing the Google Maps iframe in the background and layering the content on top, it creates a modern and memorable final impression. An overlay with a semi-transparent background ensures that the text content remains readable against the map.

Features

Immersive Full-Width Design: The map extends to the full edges of the browser viewport.
Content Overlay: A clean, well-structured content box sits on top of the map, containing all essential business details and links.
Responsive & Mobile-Friendly: The layout works beautifully on all screen sizes, with the content box taking up full width on mobile devices.
Easy to Implement: Simply replace the placeholder Google Maps embed code and update the text content.
Layered with CSS Grid: The layout is achieved by placing both the map and the content box into a single CSS Grid cell, creating the overlay effect.

Ideal Use Cases

Hotels, resorts, and vacation rentals.
Restaurants and bars in unique locations.
Event venues, conference centers, and wedding locations.
Real estate agencies or property listings.
Any business where "place" is a key selling point.

Code Breakdown

The core of this template is the s.footer-map__container which is a CSS Grid container. Both the map iframe and the content overlay div are placed in the same grid cell (grid-area: 1 / 1 / 2 / 2;). This stacks them on top of each other. The z-index property is used to ensure the content overlay appears on top of the map.

The map iframe is set to width: 100% and height: 100% to fill the entire footer area. The content overlay uses Flexbox to center its content, providing a clean and robust layout.

Code

Here's the full code for the footer template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Full-Width Map Footer</title>
    <style>
        :root {
            --overlay-bg: rgba(255, 255, 255, 0.95);
            --overlay-text: #333333;
            --overlay-heading: #000000;
            --overlay-link-hover: #007bff;
            --copyright-text-color: #777;
        }

/* Basic body styles */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        main {
            flex-grow: 1;
            padding: 2rem;
        }

/* FOOTER STYLES START HERE */
        
        .footer-map {
            position: relative;
            height: 450px;
            display: grid; /* Use grid to layer content over the map */
        }

.footer-map__iframe,
        .footer-map__overlay {
            /* Place both items in the same grid cell to stack them */
            grid-area: 1 / 1 / 2 / 2;
        }

.footer-map__iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }

.footer-map__overlay {
            z-index: 1; /* Ensure overlay is on top */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

.footer-map__content-box {
            background-color: var(--overlay-bg);
            padding: 2.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            max-width: 90%;
            width: 450px;
            text-align: center;
        }
        
        .footer-map__heading {
            color: var(--overlay-heading);
            font-size: 1.75rem;
            margin: 0 0 1rem 0;
        }
        
        .footer-map__address {
            color: var(--overlay-text);
            line-height: 1.6;
            font-size: 1rem;
            margin: 0 0 1.5rem 0;
        }
        
        .footer-map__links ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1.5rem;
        }

.footer-map__links a {
            color: var(--overlay-text);
            font-weight: 500;
            text-decoration: none;
            transition: color 0.2s;
        }
        .footer-map__links a:hover {
            color: var(--overlay-link-hover);
        }
        
        .footer-map__copyright {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2; /* Keep copyright above map */
            font-size: 0.8rem;
            color: var(--copyright-text-color);
            background-color: rgba(255, 255, 255, 0.7);
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
        }

</style>
</head>
<body>
    <main>
        <h1>Full-Width Map Footer</h1>
        <p>A bold design where the map becomes the footer background.</p>
    </main>

<footer class="footer-map" role="contentinfo">
        
        <iframe 
            class="footer-map__iframe"
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.257581903086!2d-122.42172838468165!3d37.78443997975718!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085809961d798f7%3A0x4a7947b146243886!2sSan%20Francisco%20City%20Hall!5e0!3m2!1sen!2sus!4v1630123456789!5m2!1sen!2sus" 
            allowfullscreen="" 
            loading="lazy" 
            aria-label="Location Map">
        </iframe>
        
        
        <div class="footer-map__overlay">
            <div class="footer-map__content-box">
                <h2 class="footer-map__heading">Find Us Here</h2>
                <address class="footer-map__address">
                    1 Dr Carlton B Goodlett Pl<br>
                    San Francisco, CA 94102<br>
                    (415) 555-0199
                </address>
                <nav class="footer-map__links" aria-label="Footer Links">
                    <ul>
                        <li><a href="#">Directions</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Hours</a></li>
                    </ul>
                </nav>
            </div>
        </div>

View Output