Skip to content

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)

Explore and learn. Released under the MIT License.