MapInfo

MapInfo Component

Description

The MapInfo component displays an interactive Google Map showing an apartment's location along with key Cornell University landmarks. It includes walking distance information to major campus locations and provides map controls for zooming and expansion.

Usage

To use the MapInfo component, import it and provide the address and coordinate location information for the apartment, as well as the travel time data to major campus location (the travel time data should be queried through calling the corresponding endpoint and passed into this component as props).

Props Interface

type BaseProps = {
  readonly address: string | null;
  readonly latitude?: number;
  readonly longitude?: number;
  readonly travelTimes?: LocationTravelTimes;
  isMobile: boolean;
};

type MapInfoProps = BaseProps & {
  handleClick: () => void;
  mapToggle: boolean;
};

• [address]: A string representing the apartment's address. Can be null.
• [latitude]: A number representing the apartment's latitude coordinate. Defaults to 0 if not provided.
• [longitude]: A number representing the apartment's longitude coordinate. Defaults to 0 if not provided.
• [travelTimes]: An object (of type LocationTravelTimes) containing walking times (in minutes) to campus locations:
  • [engQuadWalking]: Time to Engineering Quad
  • [hoPlazaWalking]: Time to Ho Plaza
  • [agQuadWalking]: Time to Ag Quad
• [isMobile]: A boolean indicating if the component is displayed on a mobile device.
• [handleClick]: A callback function triggered when the expand map button is clicked.
• [mapToggle]: A boolean used to trigger map recentering when changed.

Example Usage

function ApartmentPage() {
return (
  <MapInfo
    address="123 College Ave"
    latitude={42.4445}
    longitude={-76.4836}
    travelTimes={{
      engQuadWalking: 10,
      hoPlazaWalking: 15,
      agQuadWalking: 20
    }}
    handleClick={() => setExpandedMap(true)}
    mapToggle={false}
    isMobile={false}
  />
);
}

Expected Behavior

• Displays an interactive Google Map centered on the apartment location
• Shows markers for the apartment and three campus landmarks
• Lists walking distances to Engineering Quad, Ho Plaza, and Ag Quad
• Provides zoom controls and an expand button
• Recenters map when first loaded or mapToggle changes

Edge Cases

• Missing coordinates will default to (0,0)
• Missing travel times display as 0 minutes
• Missing Google Maps API key shows fallback message

Implementation Strategy

• The component uses useRef to maintain a reference to the Google Maps instance, allowing for controlled zoom and center operations.
• Map recentering is handled through useEffect to prevent unnecessary re-renders. Subscribed to the mapToggle prop state.

Runtime Analysis:

• Component initialization: O(1)
• Map operations (zoom, recenter): O(1)
• Marker rendering: O(1) - fixed number of markers