Replace the static housing map with Google Maps #99

New issue

Open

opened 2026-09-18 21:00:26 +00:00 by emmawong · 0 comments

emmawong commented

2026-09-18 21:00:26 +00:00

Member

Overall Objective

Replace the static image on /map with an interactive Google Map showing our dorms. Users should be able to pan, zoom, and select a dorm marker to open its existing building-details page.

No new Figma design is required!

Suggested Approach

Use Google's React Maps tutorial as guidance. Follow sections 3–6 for the map and markers, then 8 for clicks. The setup has already been taken care of.

Open apps/frontend/src/app/map-page.tsx. Follow the tutorial's APIProvider and Map examples to replace the static image.
Use the settings from issue #94 instead of pasting the tutorial's key. Request /api/config/maps through apps/frontend/src/api/client.ts, then pass its apiKey to APIProvider and mapId to Map when enabled is true.
Replace the tutorial's Sydney locations with CMU dorms. Use the coordinates added in Issue #97 : location.latitude becomes lat, and location.longitude becomes lng. Give each marker the dorm's name and skip any record without valid coordinates.
Follow the tutorial's marker-click example, but open the dorm's existing page instead of moving the map. Use React Router's useNavigate() to go to /building/${building.id}. No popup or new details page is needed.
Choose an initial view that shows the dorms around CMU. Give the map a visible height, keep the current page heading, and change the instructions to “Select a dorm marker to view building details.” Make sure it fits on both phones and desktops.
Show a loading message while the map starts, and an unavailable message with building links if settings are missing or loading fails.

Help & Resources

### Overall Objective Replace the static image on `/map` with an interactive Google Map showing our dorms. Users should be able to pan, zoom, and select a dorm marker to open its existing building-details page. No new Figma design is required! ### Suggested Approach Use [Google's React Maps tutorial](https://developers.google.com/codelabs/maps-platform/maps-platform-101-react-js#5) as guidance. Follow sections **3–6** for the map and markers, then **8** for clicks. The setup has already been taken care of. 1. Open [`apps/frontend/src/app/map-page.tsx`](https://git.cmu.dev/ScottyLabs/housing/src/branch/main/apps/frontend/src/app/map-page.tsx). Follow the tutorial's `APIProvider` and `Map` examples to replace the static image. 2. Use the settings from issue #94 instead of pasting the tutorial's key. Request `/api/config/maps` through `apps/frontend/src/api/client.ts`, then pass its `apiKey` to `APIProvider` and `mapId` to `Map` when `enabled` is true. 3. Replace the tutorial's Sydney locations with CMU dorms. Use the coordinates added in Issue #97 : `location.latitude` becomes `lat`, and `location.longitude` becomes `lng`. Give each marker the dorm's name and skip any record without valid coordinates. 4. Follow the tutorial's marker-click example, but open the dorm's existing page instead of moving the map. Use React Router's `useNavigate()` to go to `/building/${building.id}`. No popup or new details page is needed. 5. Choose an initial view that shows the dorms around CMU. Give the map a visible height, keep the current page heading, and change the instructions to “Select a dorm marker to view building details.” Make sure it fits on both phones and desktops. 6. Show a loading message while the map starts, and an unavailable message with building links if settings are missing or loading fails. ### Help & Resources - Issue #94 - Issue #97 - [README](../../ScottyLabs/housing/src/branch/main/README.md) - [Contributing Guidelines](../../ScottyLabs/housing/src/branch/main/docs/CONTRIBUTING.md)