メニュー

Theme Configuration

ストーリー連動型マップ

物語の特定のシーン（storyNo）に関連する施設のみをハイライト表示します。storyNoを指定しない場合は、すべての施設が表示されます。

プロパティ・コントローラー

施設データ (nearSpots - JSON)

呼び出しコード (Next.js)

<style>
  .mapContainer {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
  }
  @media (max-width: 768px) {
    .mapContainer {
      width: 100%;
      height: auto;
    }
  }
</style>

<div className="mapContainer">
  <SpotsMapForStory
    propertyLat={35.601}
    propertyLng={139.7095}
    propertyName={"サンプル物件"}
    nearSpots={/* JSON.parse(...) した施設データ */}
  />
</div>

変数名

変数名内容必須解説
Type物件種別戸建て：house / マンション：mansion / 土地：land
上記いずれかを指定することにより、あらかじめicon_（Type名）.pngで入れておいたアイコン画像を表示することができます。
もし画像を入れておらず、指定の画像URLも未入力の場合は、各タイプのデフォルトの画像が表示されます。

my-next-app/
└─ public/
   └─ icons/
      └─ icon-house.png
      └─ icon-mansion.png
      └─ icon-land.png
Latitude緯度●数値。
Longitude経度●数値。
iconUrl画像URL独自で用意したアイコン画像を使いたい場合のファイル名。
画像はそのままの大きさで表示しますので、表示したいサイズで保存してください。
場所は上記と同様public/icons内。

備考