I am doing everything as in the lesson explained, and typing exactly the same code. The lesson I am stuck on, is to use Mapbox package, to show the location of particular campground. So there is a file show.ejs, inside there are lines of codes:
<script>
const mapToken = '<%=process.env.MAPBOX_TOKEN%>';
const campground = '<%- JSON.stringify(campground) %>';
</script>
And another file showPageMap.js, with lines of codes:
mapboxgl.accessToken = mapToken;
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: campground.geometry.coordinates, // starting position [lng, lat]
zoom: 8, // starting zoom
});
new mapboxgl.Marker()
.setLngLat(campground.geometry.coordinates)
.addTo(map)
All this I have typed as per video by Colt, by him works everything, but I got this error:
Uncaught TypeError: Cannot read properties of undefined (reading
‘coordinates’)
at showPageMap.js:5:33
Please help somebody!
Tried to google, how can I fix it, but without any results!
2
Answers
I have already done this, but it’s not working!
The problem is with passing object to the template.
Try removing quotes from variable when passing it to the template: