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)