メニュー

シンプルな1地点地図

ある地点（物件、施設）をマッピングします。物件紹介にも使えますし、「〇〇の場所は？」と聞かれたときにも使えます。

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

カスタムスタイル (CSS変数)

変数名
値

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

<style>
  .mapContainer {
    width: 100%;
    height: 400px;
  }
  @media (max-width: 768px) {
    .mapContainer {
      width: 100%;
      height: 400px;
    }
  }
</style>

<div className="mapContainer">
  <SimplePointMap
    propertyName={"さんぷるハウス"}
    propertyType={"house"}
    propertyLatitude={35.6843}
    propertyLongitude={139.7566}
  />
</div>

変数名

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

my-next-app/
└─ public/
   └─ icons/
      └─ icon-house.png
      └─ icon-mansion.png
      └─ icon-land.png
name地点名
propertyType種別 数値。
latitude緯度●数値。
longitude経度●数値。
iconUrlカスタムアイコンURL独自で用意したアイコン画像を使いたい場合のファイル名。
画像はそのままの大きさで表示しますので、表示したいサイズで保存してください。
場所は上記と同じpublic/icons内。
style幅 (PC)
高さ (PC)
幅 (スマホ)
高さ (スマホ)
●地図の大きさ。指定しないと地図が表示されません。
styleその他のスタイルCSS変数名【デフォルト値】説明
--popup-bg-color【white】ポップアップの背景色
--popup-text-color【#333】ポップアップの文字色（全体）
--popup-header-color【inherit】ポップアップのヘッダー（h3タグ）の文字色
--popup-border-radius【4px】ポップアップの角の丸み
--popup-padding【4px 8px】ポップアップの内側の余白
--popup-box-shadow【0 1px 2px rgba(0,0,0,0.1)】ポップアップの影
--popup-border【none】ポップアップの枠線（例: '1px solid black'）
--popup-font-family【sans-serif】ポップアップのフォント
--popup-font-size【14px】ポップアップのヘッダーのフォントサイズ
--popup-font-weight【bold】ポップアップのヘッダーのフォントの太さ

備考