google map のiframeコードをHTMLに埋め込む場所を教えてください。

日本語 ディスカッション 技術的なQ＆A
1

テンプレートを利用してページを作成し、セクションの設定で「地図」を挿入しGoogle マップのAPIを入力しましたが反映されません。別手段としてgoogle map のiframeコードをHTMLに直接埋め込みたいのですがindex.jsonのどこに埋め込めば良いかわかりません。教えていただけないでしょうか。

1 Like
2

下記のような流れになるかと思います。

Step 1.

ご希望のHTMLを持ったセクションを作成する。

Step 2.

直接index.jsonを編集して、作成したセクションを追加する。

or

管理画面 > オンラインストア > テーマ > カスタマイズ にて、作成したセクションをトップページに追加する。

セクションの追加方法は下記です。

https://www.shopify.com/jp/blog/partner-how-to-create-your-first-shopify-theme-section

と言われても困ってしまうかもしれませんので、

簡単にやり方をご説明します。

まず、sectionsに、shop-map.liquid のようなファイルを作成します。

shop-map.liquidに、下記を記述します。(Googleマップのコードは、“Googleマップのiframeコードを記載 ここから” から “Googleマップのiframeコードを記載 ここまで” の間に挿入してください。)


{% schema %}
  {
    "name": "Shop Map",
    "presets": [
      {
        "name": "Shop Map"
      }
    ]
  }
{% endschema %}

そうしますと、

管理画面 > オンラインストア > テーマ > カスタマイズ にて、

「セクションを追加」をクリックすると、

"Shop Map"という名のセクションが追加できるようになっているはずです。

そのセクションを追加し、お好きな位置にドラッグ&ドロップしていただき、保存していただければ、地図の表示ができるはずです。

上記で、コツを掴まれましたら、ご希望の形になるようにさらにカスタマイズを加えていただくと良いかと思います。

ご参考までに。

キュー田辺

1 Like
3

詳細にご説明いただきありがとうございます！
ついに表示することができました。
勉強になりました。
細かな表示の変更などにもチャレンジしています。
感謝申し上げます。