DOCS

ウィジェットの埋め込み

tickadoo マップウィジェットをウェブサイトに追加する方法。

tickadoo マップウィジェットをウェブサイトに埋め込む方法は2つあります。どちらも管理パネルの配信ページから利用できます。

シンプル埋め込み（推奨）

ページの任意の場所に script タグを1つ追加するだけで、ウィジェットが自動的にレンダリングされます。

Simple embed
<script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" data-connect-map="YOUR_MAP_ID"></script>

マップは script タグの位置に表示され、コンテナの幅いっぱいに広がります。デフォルトの高さがありますが、親要素の CSS でサイズを制御できます。

Tip

最良の結果を得るには、高さが指定されたコンテナ内に script タグを配置してください。ウィジェットは利用可能なスペースに合わせて拡張されます。

アドバンス埋め込み

配置やスタイリングをより細かく制御するには、Web Component アプローチを使用します：

Advanced embed
<script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" defer></script>
<tickadoo-map map-id="YOUR_MAP_ID" style="height: 500px">
</tickadoo-map>

このアプローチでは：

  • defer 属性により、ページのレンダリングをブロックせずにスクリプトを読み込みます
  • <tickadoo-map> 要素で、配置とサイズを完全に制御できます
  • 他の HTML 要素と同様に CSS でスタイリングできます

ウィジェットのサイズ設定

ウィジェットはコンテナのサイズに従います。一般的なパターンは以下の通りです：

固定高さ

Fixed height container
<div style="height: 600px">
  <script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" data-connect-map="YOUR_MAP_ID"></script>
</div>

ビューポート全体の高さ

Full viewport
<tickadoo-map map-id="YOUR_MAP_ID" style="height: 100vh">
</tickadoo-map>

レスポンシブなアスペクト比

Responsive aspect ratio
<tickadoo-map map-id="YOUR_MAP_ID" style="aspect-ratio: 16/9; width: 100%">
</tickadoo-map>
script タグはどこに配置すべきですか？

シンプル埋め込みの場合、マップは script の位置にレンダリングされます。マップを表示したいページのセクション（通常はコンテンツエリアや専用のマップセクション）に配置してください。

アドバンス埋め込みの場合、<script> タグを <head> または <body> の末尾に配置し、<tickadoo-map> 要素をマップを表示したい場所に配置します。

1つのページに複数のマップを埋め込めますか？

はい。ただし、それぞれ独自の <tickadoo-map> 要素を使用し、アドバンス埋め込みアプローチで行ってください。スクリプトは一度だけ読み込めば十分です。

Multiple maps
<script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" defer></script>
<tickadoo-map map-id="MAP_ID_1" style="height: 400px">
</tickadoo-map>
<tickadoo-map map-id="MAP_ID_2" style="height: 400px">
</tickadoo-map>

CMS プラットフォーム

WordPress
  1. マップを表示したいページまたは投稿を編集
  2. カスタム HTML ブロックを追加（Gutenberg エディター内）
  3. シンプル埋め込みコードを貼り付け
  4. ページを公開または更新
Squarespace
  1. ページを編集し、コードブロックを追加
  2. シンプル埋め込みコードを貼り付け
  3. 保存して公開
Wix
  1. ページに HTML を埋め込む要素を追加
  2. コードフィールドにシンプル埋め込みコードを貼り付け
  3. 必要に応じて要素のサイズを調整
  4. 公開