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

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

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

最終更新 3 か月前

役に立ちましたか？

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

ソースコード

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を押しながらスクロールをしてください」のメッセージを表示しないようにできます。

culture

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

null

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

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

category_name

null

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

exclusivespot

null

forcus

spot-{spot_id} mapicon-{icon_id}

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

最終更新 3 か月前

役に立ちましたか？

ソースコード

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

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

サンプル：

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

マルチセンターの詳細はこちら

category_name

null

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

例：グルメカテゴリーのみを表示

ショッピングとグルメカテゴリーのみを表示

exclusivespot

null

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

forcus

spot-{spot_id} mapicon-{icon_id}

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