LeafletJS map not working properly. Shows zoomed out world map

I am fetching certain data from the geolocation API and displaying information about a particular IP address entered by the user. I’m also displaying the location using leaflet.js but the map doesn’t work properly. I am fetching the coordinates from the API and updating the center of the map with them. Here’s a screenshot

The JS code looks like this:

map = L.map('map').setView([lat, long], 13);

L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/0/0/0?access_token='+ACCESS_TOKEN, {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 1024,
zoomOffset: -1,
accessToken: ACCESS_TOKEN
}).addTo(map);

L.marker([lat, long]).addTo(map)
.bindPopup("popup")
.openPopup();

What might be wrong?