Sidekick: Add Store Locator Map Section

Generate the Liquid, CSS, and JavaScript for a store locator map section that I can paste into my theme as a custom section, based on this spec:

Section Heading: [e.g., “Find a Store Near You” or “Our Locations”]
Subheading: [OPTIONAL, e.g., “Visit us in person at one of our [NUMBER] locations”]

Store Locations:

Location 1:

  Store name: [NAME]
  Address: [FULL ADDRESS]
  Phone: [PHONE NUMBER]
  Hours: [BUSINESS HOURS]
  Special notes: [e.g., “Flagship store” or “Pickup available”]


Location 2:

  Store name: [NAME]
  Address: [FULL ADDRESS]
  Phone: [PHONE NUMBER]
  Hours: [BUSINESS HOURS]
  Special notes: [NOTES or “none”]


Location 3:

  Store name: [NAME]
  Address: [FULL ADDRESS]
  Phone: [PHONE NUMBER]
  Hours: [BUSINESS HOURS]
  Special notes: [NOTES or “none”]


(Add more locations as needed.)

Map Settings:

  Map provider: [Google Maps/Mapbox/static image]
  Default zoom level: [city level/region level/country level]
  Map style: [standard/dark/minimal/custom]
  Pin/marker color: [BRAND COLOR or default]
  Pin icon: [default/custom brand icon]


Search Functionality:

  Enable search by zip/postal code: [yes/no]
  Enable search by city name: [yes/no]
  Radius filter: [yes – options: 10mi, 25mi, 50mi / no]
  Show distance from search: [yes/no]


Location Cards:

  Display format: [list below map/sidebar next to map/cards below map]
  Show “Get Directions” link: [yes/no]
  Show “Call” button on mobile: [yes/no]


Design:

  Map height: [small/medium/large]
  Background color: [COLOR or “match theme”]
  Section width: [full-width/contained]


Where to paste this: Tell me which section file to save this as, note that a Maps/Mapbox API key is a manual prerequisite I need to set up, and walk me through adding it to my theme via the Shopify theme editor.