Enhance Map View and Incorporate Search Component

[jkwening]

Build out map view per wireframe design: https://github.com/orgs/TheDevPath/teams/front-end-dev-team/discussions/1

MVP TODO:

• Incorporate search component into map view
• Style view
  • display: block
  • position: relative
  • stacked - nav bar, search, and then map view with map view taking majority of the screen space
  • play around with alternative style for nav bar: maybe links across the width (home, profile, favorites, sign-in)
• Return search results (Next)
  • autocomplete and suggestions over top map view during search
  • scrollable search results either most screen with partial map or most of viewport with limited map in background
  • on selection focus map to location with marker
    • allow for options to get directions: to or from marker to/from current or provided location low-priority - MVP 2.0
    • if selection has google place id render/navigate a "places view" instead or as an option

MVP 2.0 Enhancements:

• include saved pins as part of search query if regex matches
• for authenticated users, preload saved pins on map
• add multiple views for search results - with hidden defaulting to search history on select with no query entered

[jkwening]

Ready to hand off - I'm going to move onto getting a base directions view up and running next. See Todo list in first comment - this will require refactoring ./client/src/components/search/index.js:

• no need to render map; remove any related references including user location - pass that through as a prop from the main Maps component that search component resides in. This should be passed through to MapContainer also. Actually this should be passed down from App component to all children that need it.
• also it looks like the imported module is referencing a deprecated google api ? low-priority
• if possible allow autocomplete; see an option for it but it looks like its turned off

[jkwening]

closing this ticket in favor of modular tasks:

• menu and directions icons Add hamburger icon and directions icon to map view #179
• style search view and complete event handlers logic Style search feature for map view #181
• places view Display place details #182
• load saved pins to map Preload saved pins on map #183

@khusbuchandra hopefully this helps simplify what I was trying explain on slack.