skip to Main Content

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


  1. Chosen as BEST ANSWER

    I have already done this, but it’s not working!


  2. The problem is with passing object to the template.

    Try removing quotes from variable when passing it to the template:

    const campground = <%- JSON.stringify(obj) %>;
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search