sys-hackathon-fy25-team-5

もう誰も迷わない、優しいアプリ

チーム紹介 Takagi Data / Lead Nunokawa Map / UI Sano Frontend Yaguchi microCMS / Backend Kamikawa Frontend Alyssa Frontend / Illustration

初めて⾏ったみんなが思う 「⻘島のLDKってどこ？」

実現したいこと ● 予約した後に、プレイス内や周辺情報が分かるマップが 閲覧できる ● マップのピンをタップすると各情報にアクセスできる

UIイメージ 予約完了後に予約したハウスの エリアマップが表⽰される

構成要素 × × ⼒作作るも、 今回は時間切れ😭

microCMS ● エンジニア以外でもカンタンにピン情報を追 加できるようにmicroCMSを採用 ● ピン情報📍を登録 ○ タイトル ○ サムネイル画像 ○ 位置情報（緯度・経度） etc.. ● microCMSが提供するAPI(*) でフロントエンド データ連携 * https://document.microcms.io/content-api/introduction

Frontend ● Google Mapsの上に画像を重ねて表示する(*1) ○ 透過PNGの施設画像を、背景のマップと馴 染ませるように配置 ● Google Mapsのstyle(*2) をカスタマイズする ● microCMSのデータ受取→マーカー表示 ● マーカーのクリックで詳細表示 ● ズームインのアニメーション (*1) https://developers.google.com/maps/documentation/javascript/examples/groundoverlay-simple (*2) https://developers.google.com/maps/documentation/javascript/json-styling-overview?hl=ja

demo

END