指定された2点間の徒歩ルートと、連動するストリートビューを表示します。
<style>
.mapContainer {
width: 100%;
height: 500px;
}
@media (max-width: 768px) {
.mapContainer {
width: 100%;
height: 700px;
}
}
</style>
<div className="mapContainer">
<RouteStreetView
propertyName={"現在地"}
propertyLatitude={35.6843}
propertyLongitude={139.7566}
propertyType={"house"}
spotName={"最寄り駅"}
spotLatitude={35.6812}
spotLongitude={139.7671}
spotType={"station"}
/>
</div>| 変数名 | 内容 | 必須 | 解説 |
|---|---|---|---|
| propertyName | 始点名 | ||
| propertyType | 始点種別 | 戸建て：house / マンション：mansion / 土地：land 上記いずれかを指定することにより、あらかじめicon_（Type名）.pngで入れておいたアイコン画像を表示することができます。 もし画像を入れておらず、指定の画像URLも未入力の場合は、各タイプのデフォルトの画像が表示されます。
my-next-app/
└─ public/
└─ icons/
└─ icon-house.png
└─ icon-mansion.png
└─ icon-land.png | |
| propertyLatitude | 始点 緯度 | ● | 数値。 |
| propertyLongitude | 始点 経度 | ● | 数値。 |
| propertyIconUrl | 始点アイコンURL | 独自で用意したアイコン画像を使いたい場合のファイル名。 画像はそのままの大きさで表示しますので、表示したいサイズで保存してください。 場所は上記と同じpublic/icons内。 | |
| spotName | 終点名 | ● | アイコンをクリックするとポップアップで文字が現れます。 |
| propertyType | 終点アイコンURL 終点名 終点種別 | あらかじめicon_（Type名）.pngで入れておいたアイコン画像を表示することができます。 もし画像を入れておらず、指定の画像URLも未入力の場合は、各タイプのデフォルトの画像が表示されます。 場所は上記と同じpublic/icons内。 | |
| spotLatitude | 終点 緯度 | ● | 数値。 |
| spotLongitude | 終点 経度 | ● | 数値。 |
| spotIconUrl | 画像URL | 独自で用意したアイコン画像を使いたい場合のファイル名。 画像はそのままの大きさで表示しますので、表示したいサイズで保存してください。 場所は上記と同じpublic/icons内。 | |
| style | 幅 (PC) 高さ (PC) 幅 (スマホ) 高さ (スマホ) | ● | 地図の大きさ。指定しないと地図が表示されません。 |
| style | その他のスタイル | CSS変数名【デフォルト値】説明 --route-line-color【#8a5770】ルートラインの色 --route-line-width【8】ルートラインの太さ（ピクセル） --popup-bg-color【white】ポップアップの背景色 --popup-text-color【#333】ポップアップの文字色 --popup-header-color【inherit】ポップアップのヘッダーの文字色 --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】ポップアップのヘッダーのフォントの太さ |