Magento 2联系我们页面修改咨询：插入全屏Google Maps自定义区块

Hey there! Let's walk through how to add a full-width Google Maps block to your Magento 2 Contact Us page while keeping the rest of the content in its original container (with side margins). Here's a step-by-step approach that follows Magento best practices:

1. Choose Your Implementation Method #

You have two main options: using a custom module (recommended for long-term maintainability) or modifying your active theme. We'll cover both below.

Option 1: Using a Custom Module #

If you don't already have a custom module, create one first (it's simpler than you think):

• Create the module structure in app/code/Vendor/Module
• Add registration.php and module.xml files to register the module (standard Magento module setup)

a. Create the Google Maps Template File #

Create app/code/Vendor/Module/view/frontend/templates/contact/google-map.phtml with your Google Maps embed code:

<div class="google-map-wrapper">
    <!-- Replace with your Google Maps embed URL (get this from Google Maps share menu) -->
    <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.219815093913!2d-73.9854286846802!3d40.74881707932804!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a70d4f3c99%3A0x783fbf2b7478392!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1690000000000!5m2!1sen!2sus" 
        width="100%" 
        height="400" 
        style="border:0;" 
        allowfullscreen="" 
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade">
    </iframe>
</div>

b. Modify the Contact Page Layout #

Create app/code/Vendor/Module/view/frontend/layout/contact_index_index.xml to insert the full-width block:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <!-- Add full-width container BEFORE the main contact content -->
        <container 
            name="contact.google.map.container" 
            label="Contact Google Map Container" 
            htmlTag="div" 
            htmlClass="full-width-google-map" 
            before="-">
            <block 
                class="Magento\Framework\View\Element\Template" 
                name="contact.google.map" 
                template="Vendor_Module::contact/google-map.phtml" />
        </container>

        <!-- To place it AFTER the main content, replace `before="-"` with `after="main.content"` -->
    </body>
</page>

c. Add CSS for Full-Width Styling #

Create app/code/Vendor/Module/view/frontend/web/css/source/_module.less to make the block span the full viewport width:

.full-width-google-map {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: #f5f5f5; // Optional: Add a background color if needed

    .google-map-wrapper iframe {
        width: 100%;
        height: 400px; // Adjust height to your preference
        border: none;
    }
}

Option 2: Using Your Active Theme #

If you prefer to modify your theme directly (no module required):

1. Create the template file in app/design/frontend/YourVendor/YourTheme/Magento_Contact/templates/google-map.phtml (same content as above)
2. Modify the layout file in app/design/frontend/YourVendor/YourTheme/Magento_Contact/layout/contact_index_index.xml (same layout code as above, adjust the template path to Magento_Contact::google-map.phtml)
3. Add the CSS to your theme's _styles.less or custom.css file

Final Steps #

1. Flush Magento Cache: Run php bin/magento cache:flush in your terminal
2. Deploy Static Content (if in production mode): Run php bin/magento setup:static-content:deploy -f
3. Visit your Contact Us page to see the full-width Google Maps block in action!

Notes #

• The calc(-50vw + 50%) margin trick ensures the block spans the full screen while staying centered, even if your site has a fixed-width container.
• Adjust the height value in both the template and CSS to match your design needs.
• Make sure your Google Maps embed URL is correctly formatted (you can get this by clicking "Share" > "Embed a map" in Google Maps).

内容的提问来源于stack exchange，提问作者naknak12