Shopify Liquid：如何将 Google 地址 url 呈现到 Google Map 中

Question

我正在制作一个通用解决方案，当我单击第一个地址图标时，它必须显示绑定到它的地址映射。与第二个相同。我已将架构添加为 address-id 作为类型文本，并在 Shopify 编辑主题促销块（代码底部的架构。）下为每个地址块传递 URL。我将address-id 传递给data HTML 属性。然后单击.promo 块，我得到数据属性并存储在一个变量中，我将这个变量传递给Jquery.html(mapAddress)。单击每个地址图标时，我将获得当前地址或 URL。我想将其显示为地图。我试图将<iframe> 直接添加到address-id 到输入框address-id 中，但这不能正常工作。它显示 Iframe 值。在这里可以做些什么来让谷歌地图 url 呈现为地图？ 谢谢。

Shopify 液体模板

 <div class="sixteen columns featured_links">
    <div class="section clearfix feature">
      {% for block in section.blocks %}
        <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">
          {% if block.settings.link != blank %}
            <a href="{{ block.settings.link }}">
          {% endif %}

          <div class="{% if section.settings.rounded_image != blank %}rounded{% endif %}">
            {% if block.settings.image != nil %}
              <img  src="{{ block.settings.image | img_url: '300x' }}"
                    alt="{{ block.settings.image.alt }}"
                    data-src="{{ block.settings.image | img_url: '2048x' }}"
                    class="lazyload"
                    {% comment %} data-sizes="auto" {% endcomment %}
                    data-srcset=" {{ block.settings.image | img_url: '2048x' }} 2048w,
                                  {{ block.settings.image | img_url: '1600x' }} 1600w,
                                  {{ block.settings.image | img_url: '1200x' }} 1200w,
                                  {{ block.settings.image | img_url: '1000x' }} 1000w,
                                  {{ block.settings.image | img_url: '800x' }} 800w,
                                  {{ block.settings.image | img_url: '600x' }} 600w,
                                  {{ block.settings.image | img_url: '400x' }} 400w"
                     />
            {% else %}
              {% capture i %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %}
              {{ 'collection-' | append: i | placeholder_svg_tag: 'placeholder-svg placeholder-svg--promotions' }}
            {% endif %}
          </div>

          {% if block.settings.title != blank %}
            <h3>{{ block.settings.title | escape }}</h3>
            {% if section.settings.show_divider %}
              <div class="feature_divider"></div>
            {% endif %}
          {% endif %}
          {% if block.settings.link != blank %}
            </a>
          {% endif %}

          {% if block.settings.text != blank %}
            {{ block.settings.text }}
          {% endif %}
        </div>

        {% if section.settings.featured_promos_per_row == 2 %}
          {% cycle '', '<br class="clear " />' %}
        {% elsif section.settings.featured_promos_per_row == 3 %}
          {% cycle '', '', '<br class="clear" />' %}
        {% else %}
          {% cycle '', '', '', '<br class="clear" />' %}
        {% endif %}
      {% endfor %}
    </div>

    {% if section.settings.contact_address != blank %}
    <br class="clear" />
    <div class="embed-container maps">
        <iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d945.7084267048235!2d73.8854388291583!3d18.536415399212462!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xdda3387f821de029!2sWink+%26+Nod!5e0!3m2!1sen!2sin!4v1525613363322"></iframe>
    </div>
    {% endif %}    
  </div> 
</div>

JQuery 代码 onClick 加载谷歌地图

<script>
$('.promo').click(function(){
    var mapAddress=$(this).attr("data-address");
  $('.embed-container, .maps').html(mapAddress);
}); 
</script>

架构

{% schema %}
{
        {
          "type": "text",
          "id": "address-id",
          "label": "Address-ID"
        }
}
{% endschema %}

Answer 1

我只需使用 .html()和 Vola 将 mapAddress 变量传递到 Iframe src。有效 ！！！

$('.promo').click(function(){
    var mapAddress=$(this).attr("data-address");
    $(".embed-container, .maps").html('<iframe  width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+mapAddress+'"><\/iframe>');
});