From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Geocoding and Mapbox map

Geocoding and Mapbox map - Next.js Tutorial

From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB

Start my 1-month free trial Buy for my team

Geocoding and Mapbox map

“

OK, so now we're going to be implementing our map. And there's basically two steps to this. We're going to be using Mapbox. So you need to sign up for an account for Mapbox. And we're going to be using a package called React Map GL, which is an API for Mapbox. So we'll use that to display the map. Now, in order to display the marker where we want, it needs to be in the latitude and longitude of the property, which obviously we don't have the user put in into the database, so we have to use geocoding, which is taking the address and getting the latitude and longitude from that. So we'll be using Google geocoding, so you'll need to get a geocode API key from Google Cloud. And then we'll use the React geocode package to actually do the geocoding in the component. All right, so the first step is to sign up for Mapbox. Just go to log in, sign up, verify your email, log in, and then you'll see a page like this. And you should be able to create a token, and it'll look something like that. So…

Contents