The Scenario
A local coffee shop needs a "Find Us" page. They want an interactive map showing their three locations, rather than just a static image. You need to use the Google Maps (or Mapbox) API to render this.
The Brief
Use a mapping API to render an interactive map centered on a specific city. Place three custom markers on the map representing the coffee shop locations. When a user clicks a marker, a small info window should pop up showing the address.
Deliverables
- The React component initializing the map and markers
- A brief explanation of how you secured your API key (e.g., using environment variables and HTTP referrer restrictions)
Submission Guidance
The hardest part of this task for beginners is often just getting the API key and reading the docs. Prove you can follow external documentation.
Submit Your Work
Your submission is graded against the rubric on the right. If you pass, you get a public Badge URL you can share on LinkedIn. There is no draft save, so work offline first and paste your finished response here.