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: 621.

[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!