Implemented Google Map (New Version) in Apartment Page

[CasperL1218]

Summary

This pull request is the first step toward implementing the Google Map & distance from campus information for the Apartment page.

Google Map:

• implemented Google Map with default centered at the apartment location (latitude, longitude)
• implemented apartment icon marker fixed at the apartment coordinate
• allow user interactions (expand, drag and move, zoom in/out)

Location information:

• implemented display of apartment address
• implemented display of distance (time required) from campus via walking/driving

Test Plan

Location section and Google Map

Google Map drag and move

Google Map zoom in

Google Map zoom out

Google map full-screen expansion

Google Map drag and move, zoom in/out (full-screen)

Notes

*Note: the time required for walking/driving to campus is currently hardcoded to 0

Future Plans

• Implement markers & titles for important campus landmarks (e.g., Arts Quad, Eng. Quad)
• Implement modal design for map expansion (instead of the current full-screen expansion)

[dti-github-bot]

[diff-counting] Significant lines: 728.

[kea-roy]

PR Review

This is a really nice implementation of the map. The front-end design looks great on large and small screens, adapting correctly to the page layout even for mobile devices. It looks nearly identical to the Figma design, so great work!

Even though the design is really good, I noticed a few things that could be improved.

1. The pin in the Figma design also has a small red ellipse below the pin, but the SVG file you used doesn't include that ellipse. You could consider updating the SVG file used to include the ellipse or check with the designers if the red ellipse is needed.

2. Remove console.log command in MapInfo.tsx: This prints the API key to the console. While good for testing, this is unnecessary and it is probably better to omit it from the console for security reasons.

[MapInfo.tsx]

40:  console.log(process.env.GOOGLE_MAP_API_KEY);

3. Improving the documentation of your code, for instance adding a doc comment for your MapInfo component, just to make the code easier to understand.

[MapInfo.tsx]

32: // add documentation here
33: export default function MapInfo({

Overall, these are minor changes and you did a great job!

[CasperL1218]

The implementation of the zoom functionality update tackled 2 issues:

1. Implemented zoom in/out buttons for default/small map and map modal
   *Note: the design of the zoom buttons requires further confirmation from the designers to confirm button design styles.

2. Resolved firebase import issue similar to this: https://stackoverflow.com/questions/69971326/firebase-node-modules-firebase-app-dist-app-index-has-no-exported-member-us
   Resolved by:

• Adding export default firebase; to the end of the firebase.ts file
• Adding relative import path to import firebase in the frontend component & page files that are referencing firebase.User

[kea-roy]

PR Review

Hi Casper, your implementation of the zoom in-out buttons is going great, I've tested the look and the zoom button's responsiveness on different screens and you have made sure it adapts well. Good work on that!

However, I noticed a few responsiveness issues that could still be addressed.

1. Main screen: wrap text issue

• Although this is pretty minor, certain screen sizes cause the text to wrap around, creating an inconsistent design. Maybe check with the designers on what the design should look like if the text doesn't fit: most likely either abbreviating the text with ellipsis or making all of the text wrap around and slightly indented.

2. Modal responsiveness: Information cut off

• Even though the map itself is very responsive, the dialog containing all the information is not quite there yet. If a scrollable element is not recommended by the designers, consider removing all of the text below the map on smaller screens (check with designers on this for feedback).

3. Zoom in and out icons

Remember to update the icons with the correct ones when you get the designs from the designers!

Overall, these are small design issues that just require a bit more specification and feedback from the team. The actual functionality is great! So good job on this PR!