Webサイト埋め込みとセキュリティ
Webflow、WordPress、Shopify、Next.js等にマップを埋め込み。ドメインホワイトリストで視覚資産を保護します。
インストール方法: スクリプトと iframe
Layerpin には、Web サイト、CMS、または Web アプリケーションでインタラクティブ マップを公開するための 2 つのインストール方法が用意されています。どちらの方法でも、流体の応答性、マルチタッチのピンチズーム、動的なコンテナのサイズ変更がサポートされています。
単一の自己初期化スクリプト タグ。カスタム CSS を必要とせずに、コンテナの幅を自動的に測定し、動的なビューポートの高さを管理し、累積的なレイアウトのシフトを防ぎます。
<script src="https://layerpin.com/embed.v1.js?map=emb_YOUR_MAP_ID&width=100%25&height=640px&minHeight=320px&border=none"></script>標準のサンドボックス iframe スニペット。厳格な CMS 環境、サードパーティのサンドボックス、外部 JavaScript タグを制限するプラットフォームに最適です。
<iframe
src="https://layerpin.com/embed/emb_YOUR_MAP_ID"
title={t("Interactive map")}
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
allow="fullscreen"
allowfullscreen
style="display:block;width:100%;height:640px;min-height:320px;border:0;"
></iframe>ダイレクト URL 保護
ブラウザーのアドレス バーで直接埋め込み URL にアクセスすることは、設計によりブロックされています。 Layerpin では、承認された埋め込みコンテナ内でマップを安全にレンダリングするために、検証された親オリジンが必要です。
高さのプリセットとレスポンシブ レイアウト
埋め込み幅は常に、その包含ブロックを 100% 埋めるように拡張されます。 4 つの事前定義された高さプリセットから選択するか、カスタム寸法を指定できます。
サイドバー列、製品詳細ウィジェット、コンパクトなブログの挿入に適しています。
全幅のランディング ページ、ガイド、ディレクトリ リストのバランスの取れたデフォルト。
複数のフロアの建築設計図、キャンパス ツアー、高密度の回路図用に設計されています。
モバイルとデスクトップのブラウザ ビューポート全体を表示し、専用のマップ エクスプローラー アプリケーションに最適です。
ロードモードとビューアコントロール
埋め込みマップの読み込み方法と、訪問者が使用できるコントロールを構成します。
レイジー (デフォルト): Defers map initialization until the visitor scrolls near the container, maximizing page speed scores. 熱心な： ヒーローセクションの最初の HTML 解析ですぐにロードされます。
ビューア内の全画面展開ボタンを有効にします。訪問者は、Web サイトから移動することなく、マップをモニター全体に拡大して詳しく調べることができます。
埋め込みビューア内のプラットフォーム帰属バッジを切り替えます。有料プランでは、ブランドを非表示にして、シームレスで完全にホワイトラベルのビジュアル プレゼンテーションを実現できます。
言語クエリパラメータを渡します(例: ?lang=ja) iframe 内 送信元 to pre-select the locale on regional pages. Learn more in the 多言語ガイド.
許可されたオリジンとドメインのホワイトリスト
ドメインのホワイトリストにより、インタラクティブ マップは承認した Web サイトにのみ埋め込むことができます。承認されていないドメインがマップを iframe しようとすると、アクセス拒否の通知が届きます。
オリジンセキュリティルール
- HTTPS プロトコルが必要です: Embed origins require secure connections. Enter domains with or without protocol (e.g.,
https://mycompany.comormycompany.com). - パス、クエリ、ハッシュがない場合: Do not include subpaths or parameters (e.g., use
https://store.example.com, nothttps://store.example.com/map?view=1). - ワイルドカード サブドメイン マッチング (プレミアム): Add
https://*.mycompany.comto authorize all staging branches, regional microsites, and dynamic subdomains under a single origin rule. - 厳格なリファラーポリシー: Iframes must include
Referrerpolicy="strict-origin-when-cross-origin"so the browser sends the parent origin header to our authorization validator.
埋め込みを有効にするための前提条件
地図は次のとおりである必要があります 出版された Web サイトの埋め込みをオンに切り替える前に、少なくとも 1 つの有効なオリジンがリストされている必要があります。
トライアル マップはプライベート ドラフトであり、アクティブなマップ プランが選択されるまでパブリックに埋め込むことはできません。
埋め込み ID の失効とローテーション
埋め込みコードがパブリック コード リポジトリで誤って漏洩した場合、または外部機関のハンドオフが完了した場合は、トークンを即座にローテーションできます。
[埋め込み構成] ページの右側にあるライブ ステータス レールで、 をクリックします。 IDを再生成する. Layerpin instantly creates a brand new unique embed token (e.g., 埋め込む_...).
マルチデバイスのライブプレビュー
コードを運用 Web サイトに公開する前に、Layerpin ダッシュボード内で直接ライブ埋め込みエクスペリエンスをテストします。
標準のデスクトップ モニターとワイドスクリーン ビューポートをシミュレートします。
レスポンシブ UI ドロワーを使用して iPad およびタブレットのレイアウトをテストします。
携帯電話でのタッチ ナビゲーション、ポップアップ シート、ピンチによるズームを検証します。
無料のダッシュボード プレビュー
ダッシュボードの [プレビュー] タブ内で生成されたマップのインプレッションは、毎月のマップ ビューの割り当てにはカウントされません。レイアウトの変更を検査したり、カテゴリ フィルターを自由にテストしたりできます。
ウェブサイトビルダーと CMS ガイド
Layerpin インタラクティブ マップは、すべての主要な Web サイト ビルダーでネイティブに動作します。カスタマイズされたセットアップの推奨事項については、以下からプラットフォームを選択してください。
Embed responsive interactive maps into WordPress using Gutenberg Custom HTML blocks, Classic Editor, Elementor, or Divi HTML widgets.
Embed interactive maps in Webflow Designer using the Custom Code Embed element with full support for fluid responsive containers.
Embed full-width or fixed-dimension interactive maps in Wix Studio and Wix Editor using the HTML Embed element.
Install responsive interactive maps into Squarespace 7.1 and Fluid Engine sections using Code blocks.
Add interactive maps directly into Framer canvases using the native Embed component with fluid responsiveness.
Insert responsive interactive maps into Ghost CMS publications, member pages, and posts using HTML cards.
詳細なチュートリアル
Webflow、WordPress、Wix、Squarespace、または Framer の段階的なスクリーンショットが必要ですか?
送信元の制限とプランの容量
許可されるオリジンの容量とワイルドカードのサポートは、有効なサブスクリプション プランによって決まります。
| プラン | 許可されたオリジン | ワイルドカード ドメイン (*.) | 含まれる月間ビュー数 | 公開された地図 |
|---|---|---|---|---|
| Trial | Private only | サポートされていません | Draft testing only | 0 (Draft only) |
| Basic | 10 origins | サポートされていません | 5,000 views | 3 maps |
| Pro | 25 origins | サポートされていません | 25,000 views | 15 maps |
| Premium | 50 origins | サポートされています | 100,000 views | 50 maps |