Shopify Liquid模板地址图标点击地图显示异常问题求助

Hey there! Let's fix that annoying issue where both address icons load the same map location—this is a super common pitfall with loops and event listeners, so let's break it down and get it sorted.

First, Let's Diagnose the Root Cause #

The most likely culprit here is a closure trap in your loop. If you're using var to declare your loop index i, by the time the click event fires, i will already be set to the final value of the loop (e.g., 2 for two items), so every click ends up using the last location in your list.

Another possible issue: if your map iframes share the same ID or aren't uniquely targeted, you'll always update the same iframe no matter which icon you click.

Here's How to Fix It #

1. Fix the Loop with Block-Scoped Variables or forEach

Instead of using var, switch to let (which creates a unique i for each loop iteration) or use forEach to iterate over your address icons—this avoids the closure problem entirely.

Example using forEach:

// Get all your address icons
const addressIcons = document.querySelectorAll('.address');
// Your two locations (match the order of your icons)
const mapLocations = ['Wink & Nod', 'Abhiruchi Mall'];

// Iterate over each icon with its index
addressIcons.forEach((icon, index) => {
  icon.addEventListener('click', () => {
    // Target the CORRESPONDING map iframe
    const targetIframe = document.getElementById(`map-${index}`);
    
    // Update the iframe's src to load the right location
    targetIframe.src = `https://maps.google.com/maps?q=${encodeURIComponent(mapLocations[index])}&output=embed`;
    
    // Optional: Show this iframe and hide the other one
    document.querySelectorAll('.map-iframe').forEach(frame => frame.style.display = 'none');
    targetIframe.style.display = 'block';
  });
});

2. Make Sure Your HTML Has Unique Map Iframes

Your HTML needs distinct iframes for each location, so you can target them individually. For example:

<!-- Address Icons -->
<div class="address">📍 Wink & Nod</div>
<div class="address">📍 Abhiruchi Mall</div>

<!-- Map Iframes -->
<iframe id="map-0" class="map-iframe" style="display: none;" width="600" height="450" frameborder="0"></iframe>
<iframe id="map-1" class="map-iframe" style="display: none;" width="600" height="450" frameborder="0"></iframe>

3. Double-Check Your Targeting Logic

If you were previously using a single iframe and updating its src, that's why both clicks show the same map—you need one iframe per location, or a way to toggle the src correctly based on the clicked icon.

Quick Troubleshooting Check #

• Verify that index in the forEach loop matches the order of your icons and locations.
• Use console.log(index) inside the click handler to confirm the correct index is being triggered for each icon.
• Ensure no two elements share the same ID (this is a silent bug that causes all sorts of targeting issues).

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