Project Structure & Layout

Main Containers:

• map-layout-container : Flexbox wrapper for map and nav.
• i-map-nav-container : Left (or top on mobile) navigation pane.
• i-map : Google Map display area.

Controls:

• location-search-input : Input field for location search.
• center-map-btn : Button to reset map to default state.

Dynamic Elements:

• nav-menu-items-container : Populated by location buttons.
• i-map-info-window : Generated per location for info display.

Key CSS Behaviors:

• Responsive adjustments at max-width: 800px.
• Info window content styled via .gm-style .gm-style-iw-c.
• Custom marker icons.

External Resources:

• Google Fonts
• FontAwesome
• Google Maps API (with API key)