How do I put a map with markers into my app?
Pick a map library, mount it as a client component, and drop your points on as markers.
Pick a library before you write code
react-map-gl (vis.gl) is the wrapper most projects reach for. It runs on Mapbox GL, which needs a key and starts billing past a free tier, or on MapLibre, which is free and needs no token. Google Maps (via @vis.gl/react-google-maps) needs a key too.
I am adding a map to a React app to show [number] locations. Compare react-map-gl (with Mapbox or MapLibre) and Google Maps for [my budget and whether I can use an API key]. Which fits, and why?
Maps are client-side
A map reads the window, measures the DOM, and paints tiles in the browser. None of that exists on the server, so the file needs "use client" at the top in the Next.js App Router.
Show me a minimal "use client" component in the Next.js App Router that renders a [react-map-gl] map centered on [latitude, longitude] with one marker.
Markers are just a list of points
Each marker is a coordinate with an optional label or popup. Map over your array of points and render one marker per item. Keep the point data (lat, lng, title) out of the map component so you can swap it without touching the map.
I have an array of points shaped like { lat, lng, title }. Show me how to render one [react-map-gl] marker per item with a popup that shows the title.
Pick the library first (react-map-gl with MapLibre is free, Mapbox and Google need a key). Mount the map as a client component and render markers by mapping over your points.
Additional Resources
Explore these carefully curated resources to deepen your understanding and practice the concepts covered in this lesson.