Local Business & Map Footer Template

Give your customers everything they need to find and visit your business with this map-focused footer.

Perfect for restaurants, retail stores, and any business with a physical location, this footer prioritizes function over form. It clearly displays your address, phone number, opening hours, and an interactive map to make visiting you as easy as possible.

Screenshot of a local business footer with a large embedded Google Map on one side and business details like hours and address on the other.

Get Source Code Preview

About this Local Business Footer Template

For a local business, the footer's primary job is to convert online interest into an in-person visit. This template achieves that by making practical information the hero. The layout dedicates significant space to an embedded Google Map and clearly structured contact and scheduling details. A simple bottom bar handles the standard copyright and social media links, keeping them separate from the core operational information.

Features

Map-Centric Design: Features a large, embedded Google Map so users can instantly see your location.
Clear Opening Hours: A well-structured list to display your business hours for each day.
Clickable Contact Info: The phone number uses a tel: link for easy "click-to-call" on mobile devices.
Functional Layout: The two-column design separates the map from the text details for clarity. This stacks neatly on mobile.
Easy to Customize: Simply replace the placeholder Google Maps iframe code and update the text.

Ideal Use Cases

Restaurants, Cafes, and Bars
Retail Shops and Boutiques
Salons, Spas, and Barbershops
Medical and Dental Offices
Any service-based local business.

Code Breakdown

The main section, .footer-local__main, is a CSS Grid container that creates a two-column layout on larger screens and a single, stacked column on mobile. One column holds the business details, and the other holds the Google Maps iframe. To get your own map, you can go to Google Maps, search for your business, click "Share," then "Embed a map," and copy the provided HTML.

The bottom bar uses Flexbox to align the copyright and social links. The entire footer is contained within a main footer element, which has a distinct background color to set it apart from the main page content.

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>Local Business & Map Footer</title>
    <style>
        :root {
            --footer-bg: #333333;
            --footer-text: #e0e0e0;
            --footer-heading: #ffffff;
            --footer-link-hover: #f0f0f0;
            --footer-border: #4f4f4f;
        }

/* 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;
        }

.container {
            width: 90%;
            max-width: 1140px;
            margin-left: auto;
            margin-right: auto;
        }

.main-content {
            padding: 2rem 0;
        }

/* FOOTER STYLES START HERE */
        
        .footer-local {
            background-color: var(--footer-bg);
            color: var(--footer-text);
            padding: 3rem 0;
            font-size: 0.95rem;
            line-height: 1.6;
        }

.footer-local__main {
            display: grid;
            grid-template-columns: 1fr; /* Mobile-first: single column */
            gap: 2.5rem;
            padding-bottom: 2.5rem;
            border-bottom: 1px solid var(--footer-border);
        }

.footer-local__details h3 {
            color: var(--footer-heading);
            font-size: 1.25rem;
            margin: 0 0 1.5rem 0;
        }

.footer-local__details p {
            margin: 0 0 1rem 0;
        }
        .footer-local__details a {
            color: var(--footer-text);
            text-decoration: none;
            transition: color 0.2s;
        }
        .footer-local__details a:hover {
            color: var(--footer-link-hover);
            text-decoration: underline;
        }

.footer-local__hours-list {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .footer-local__hours-list li {
            display: flex;
            justify-content: space-between;
            padding: 0.25rem 0;
        }
        .footer-local__hours-list li span:first-child {
            font-weight: 500;
        }

.footer-local__map iframe {
            width: 100%;
            height: 100%;
            min-height: 250px;
            border: 0;
            border-radius: 8px;
        }

.footer-local__bottom {
            padding-top: 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
            text-align: center;
            font-size: 0.875rem;
        }
        
        .footer-local__copyright { margin: 0; }

.footer-local__social ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            gap: 1.5rem;
        }
        .footer-local__social a { color: var(--footer-text); transition: color 0.2s; }
        .footer-local__social a:hover { color: var(--footer-link-hover); }
        .footer-local__social svg { width: 22px; height: 22px; fill: currentColor; }
        
        /* Media query for larger screens */
        @media (min-width: 992px) {
            .footer-local__main {
                grid-template-columns: 1fr 1.2fr; /* Give slightly more space to map */
                gap: 4rem;
            }
            .footer-local__bottom {
                flex-direction: row;
                justify-content: space-between;
            }
        }
    </style>
</head>
<body>
    <main>
        <div class="container main-content">
            <h1>Local Business & Map Footer</h1>
            <p>Perfect for restaurants, shops, and offices.</p>
        </div>
    </main>

<footer class="footer-local" role="contentinfo">
        <div class="container">
            <div class="footer-local__main">
                <div class="footer-local__details">
                    <h3>Visit Our Cafe</h3>
                    <p>
                        123 Main Street<br>
                        Anytown, ST 12345
                    </p>
                    <p>
                        <strong>Phone:</strong> <a href="tel:+15551234567">(555) 123-4567</a><br>
                        <strong>Email:</strong> <a href="mailto:contact@yourcafe.com">contact@yourcafe.com</a>
                    </p>
                    <ul class="footer-local__hours-list">
                        <li><span>Monday-Friday</span> <span>7am - 6pm</span></li>
                        <li><span>Saturday</span> <span>8am - 5pm</span></li>
                        <li><span>Sunday</span> <span>8am - 3pm</span></li>
                    </ul>
                </div>
                <div class="footer-local__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="Google map showing location of our cafe">
                    </iframe>
                </div>
            </div>
            <div class="footer-local__bottom">
                <p class="footer-local__copyright">&copy; 2025 Your Cafe Name. All Rights Reserved.</p>
                <nav class="footer-local__social" aria-label="Social media">
                    <ul>
                        <li><a href="#" aria-label="Our Facebook Page"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.35C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg></a></li>
                        <li><a href="#" aria-label="Our Instagram Profile"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.784.297-1.459.717-2.126 1.384S.926 3.356.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.297.784.717 1.459 1.384 2.126.667.666 1.342 1.089 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.784-.297 1.459-.718 2.126-1.384.666-.667 1.089-1.342 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.148-.558-2.913-.297-.784-.718-1.459-1.384-2.126C21.314 1.64 20.64 1.217 19.856.92c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.056 1.17-.249 1.805-.413 2.227-.217.562-.477.96-.896 1.382-.42.419-.819.679-1.381.896-.422.164-1.057.36-2.227.413-1.266.057-1.646.07-4.85.07s-3.585-.015-4.85-.074c-1.17-.056-1.805-.249-2.227-.413-.562-.217-.96-.477-1.382-.896-.419-.42-.679-.819-.896-1.381-.164-.422-.36-1.057-.413-2.227-.057-1.266-.07-1.646-.07-4.85s.015-3.585.074-4.85c.056-1.17.249-1.805.413-2.227.217.562.477.96.896-1.382.42-.419.819.679 1.381-.896.422-.164 1.057.36 2.227-.413 1.266-.057 1.646-.07 4.85-.07zM12 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.88 1.44 1.44 0 000-2.88z"/></svg></a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </footer>
</body>
</html>

View Output