Shopify Liquid实现点击地址图标加载对应Google地图的问题

看起来你已经完成了核心逻辑的搭建，但卡在了地图URL到可渲染元素的转化上——直接插入纯URL或转义后的iframe代码都没法正常显示地图。下面是针对性的分步解决方案：

问题根源拆解 #

1. 纯URL无法渲染：如果data-address存的是Google地图的普通链接（比如https://www.google.com/maps/place/...），插入后只是纯文本，浏览器不会自动把它解析成地图，必须通过<iframe>嵌入才能展示。
2. iframe代码被转义：Shopify的text类型设置会自动转义HTML特殊字符（比如把<变成<），导致你输入的<iframe>代码变成文本输出，而非实际的HTML元素。

最优解决方案：动态构建iframe元素 #

我们让用户只输入Google地图的Embed URL（也就是iframe的src属性值），然后用jQuery动态创建完整的iframe并插入页面，既规避转义问题，又更安全可控。

步骤1：更新Schema引导用户输入正确内容 #

修改Schema的提示文案，明确告诉用户要粘贴Embed URL，而非普通链接或iframe代码：

{% schema %}
{
  "type": "text",
  "id": "address-id",
  "label": "Google Maps Embed URL",
  "info": "获取方式：打开Google地图 → 点击「分享」→ 选择「嵌入地图」→ 复制iframe的src属性内容"
}
{% endschema %}

步骤2：重写jQuery点击事件代码 #

替换原有点击逻辑，不再直接插入文本，而是动态构建iframe元素：

<script>
$('.promo').click(function(e) {
  // 避免点击.promo内的<a>标签时触发地图逻辑（保留链接跳转功能）
  if ($(e.target).closest('a').length) return;

  const mapEmbedUrl = $(this).attr("data-address");
  const mapContainer = $('.embed-container.maps');

  // 验证URL有效性
  if (mapEmbedUrl && mapEmbedUrl.includes('google.com/maps/embed')) {
    // 创建iframe并设置属性
    const iframe = $('<iframe>', {
      width: '100%',
      height: '400',
      frameborder: '0',
      scrolling: 'no',
      marginheight: '0',
      marginwidth: '0',
      src: mapEmbedUrl,
      allowfullscreen: true // 可选：支持全屏查看地图
    });
    // 替换容器内容
    mapContainer.html(iframe);
  } else {
    // 无效URL时的提示（可自定义样式）
    mapContainer.html('<p class="text-center">请输入有效的Google地图嵌入链接</p>');
  }
});
</script>

步骤3：保留Liquid模板的data属性传递逻辑 #

你的现有Liquid模板已经正确将block.settings.address-id赋值给data-address属性，这部分可以保留，建议加个空值判断避免无效属性：

<div 
  {% if block.settings.address-id != blank %}data-address="{{ block.settings.address-id }}"{% endif %} 
  class="promo {% if section.settings.featured_promos_per_row == 2 %}eight columns {% cycle 'alpha', 'omega' %}{% elsif section.settings.featured_promos_per_row == 3 %}one-third column {% cycle 'alpha', '', 'omega' %}{% else %}four columns {% cycle 'alpha', '', '', 'omega' %}{% endif %} {% if section.settings.featured_links_style != blank %}{{ section.settings.featured_links_style }} {% cycle 'delay-025s', 'delay-05s', 'delay-075s', 'delay-1s' %}{% endif %} center"
>
  <!-- 原有内容不变 -->
</div>

额外优化建议 #

• 自适应地图样式：给.embed-container添加自适应宽高的样式，替代固定height：

.embed-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9宽高比，可按需调整 */
  height: 0;
  overflow: hidden;
}
.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

• 初始地图状态：你现有代码中{% if section.settings.contact_address != blank %}的默认地图逻辑可以保留，点击其他地址图标时会自动替换它。

这样修改后，用户在Shopify后台的promo区块中粘贴Google地图的Embed URL，点击对应地址图标就能正确渲染出地图了。

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