WEBサイトへの埋め込み方法

プラチナマップをWEBサイトに埋め込むためのソースコードです。なお、スタンプラリー機能を利用している場合、スタンプラリーマップの埋め込みは可能ですが、スタンプラリーを遊ぶ（スタンプを押す、スタンプ台紙を見るなど）はモバイルのみの対応となります。スタンプラリーの公開はURLまたはQRコードで発行します。詳細はスタンプラリー設定をご確認ください。

ソースコード

WEBサイト貼り付け用ソースコード

埋め込み用コードをコピーし、導入先WEBサイトに貼り付けます。サイズ指定は、各導入先WEBサイトに貼り付けたiframe要素に対して、CSSでwidth, heightを適用します。モバイルの推奨比率は（9:16）です。

WEBサイト担当者向けサンプルコード

サンプルコードをWEBサイト担当者にご共有頂くと、埋め込み方法がより分かりやすく伝わります。

sample.html

<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
    <div class="wrapper">
        <iframe loading="lazy" src="https://platinumaps.jp/maps/demo" allow="geolocation" width="100%" height="610px" style="border: 0; background-color: #fafafa;"></iframe>
    </div>
</body>
</html>

sample.css

        .wrapper {
            width: 100%;
            height: 610px;
        }
        .wrapper iframe {
            border: none;
            width: 100%;
            height: 100%;
        }
        @media screen and (max-width: 480px) {
            .wrapper {
                position: relative;
                height: auto;
            }
            .wrapper::before {
                content: "";
                display: block;
                width: 100%;
                height: 0;
                padding-top: calc(100% / 3 * 4);
            }
            .wrapper iframe {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
        }

利用可能なオプションパラメータ

埋め込みマップ(maps)に対して、次のパラメータをご利用いただけます。 https://platinumaps.jp/maps/{slug}/?attribute=value

Attribute

Values

Default

Description

fullscreen

0, 1

フルスクリーンモードで起動します。マウスのスクロールをズームモードとして動作するようになります。また、別ウィンドウでマップを開くボタンが表示されなくなります。サイネージへの組み込みなどの際にご利用ください。

nogesturehint

0, 1

マップの上でスクロールホイールを操作した際に「ズームをするにはCrtlを押しながらスクロールをしてください」のメッセージを表示しないようにできます。

サンプル：https://stamprally.digital/showcase/

culture

ja, en, zh-cn, zh-tw, ko, es, fr,es,vi,id,my,th

null

マップ表示言語を強制的に変更することが可能です。デフォルトでは未指定で、ユーザーの利用環境に応じて自動的に適切な言語に切り替わる仕組みとなっています。

英語：en
日本語：ja
繁体字：zh-tw
簡体字：zh-cn
韓国語：ko
フランス語：fr
スペイン語：es 
ベトナム語：vi 
インドネシア語：id 
ミャンマー語：my 
タイ語：th

埋め込み時のマップの中心位置やズーム率を任意の状態に変更することができます。本機能のご利用にはマルチセンターオプションへのお申し込みが必要となります。

マルチセンターの詳細はこちら https://help.platinumaps.jp/knowlege-base/special/multi-center

category_name

null

特定カテゴリーによる組み合わせのみのマップを構成することができます。

例：グルメカテゴリーのみを表示 https://platinumaps.jp/maps/demo?cf=gourmet

ショッピングとグルメカテゴリーのみを表示 https://platinumaps.jp/maps/demo?cf=shopping,gourmet

exclusivespot

null

任意スポットのマップのみをWebサイトに埋め込みたい場合に、ご利用いただけるオプションです。スポットIDと一緒お使いください。ツールバーが表示されないため、特定スポットのみ表示したい時に利用してください。ツールバーも表示した場合は、forcusオプションをご利用ください。例： https://platinumaps.jp/d/demo?s=2176&exclusivespot=1

forcus

spot-{spot_id} mapicon-{icon_id}

任意スポットのマップのみをWebサイト埋め込みたい場合に、ご利用ただけるオプションす。ツールバーが表示された状態のため、他のスポットに遷移することができます。スポット以外のマップアイコンなどにも対応いています。 https://platinumaps.jp/maps/demo?focus=spot-2213

前へカスタムページ設定次へスタンプラリー作成チュートリアル

最終更新 4 か月前

役に立ちましたか？