Mapbox in laravel using JS error on server

  javascript, laravel, mapbox, mapbox-gl-js

I have a form that gets lat and lang values from Mapbox and saves it to DB, which I do not have any problem with it on my local side but when it comes to the production server not working properly and print this error message in the console!
can anyone tell me what might cause this error?!

error message

Uncaught Error: Invalid LngLat object: (NaN, NaN)
    at new Tu (lng_lat.js:30)
    at Function.Tu.convert (lng_lat.js:112)
    at o.setLngLat (marker.js:258)
    at Boolean.<anonymous> (edit:868)
    at Function.each (bundle.js:1)
    at add_markers (edit:865)
    at r.<anonymous> (edit:819)
    at r.St.fire (evented.js:115)
    at r._render (map.js:1976)
    at map.js:2047

here is my js code

   <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.min.js'>
    </script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
    <script src='https://api.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script>

    <script>
    $( document ).ready(function() {
         var saved_markers = <?php echo json_encode($result) ?>;
        var user_location = [44, 36.2];
        mapboxgl.accessToken = 'pk.eyJ1IjoidnBpbGhhbSIsImEiOiJjazF4YTByYWowN2JhM25temppeWZnMnJjIn0.HvOIgkGAwdE32Zi1hq3TBQ';

        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/outdoors-v11',
            center: user_location,
            zoom: 10
        });

        //  geocoder here
        var geocoder = new MapboxGeocoder({
            accessToken: mapboxgl.accessToken,
            mapboxgl: mapboxgl
        });

        var marker;

        // After the map style has loaded on the page, add a source layer and default
        // styling for a single point.
        map.on('load', function () {
            addMarker(user_location, 'load');
            add_markers(saved_markers);

            // Listen for the `result` event from the MapboxGeocoder that is triggered when a user
            // makes a selection and add a symbol that matches the result.
            geocoder.on('result', function (ev) {
                marker.remove();
                console.log(ev.result);
                document.getElementById("lat").value = ev.result.center[1];
                document.getElementById("lng").value = ev.result.center[0];
                document.getElementById("loc").value = ev.result.place_name;

            });
        });

        map.on('click', function (e) {
            marker.remove();
            addMarker(e.lngLat, 'click');
            document.getElementById("lat").value = e.lngLat.lat;
            document.getElementById("lng").value = e.lngLat.lng;
            document.getElementById("loc").value = e.lngLat.loc;
  
        });

        function addMarker(ltlng, event) {
            if (event === 'click') {
                user_location = ltlng;
                console.log(user_location);
            }

            marker = new mapboxgl.Marker({
                    draggable: true,
                    color: "#d02922"
                })
                .setLngLat(user_location)
                .addTo(map)
                .on('dragend', onDragEnd);
        }

        function add_markers(coordinates) {

            var geojson = (saved_markers == coordinates ? saved_markers : '');
            console.log(geojson);


            $.each(geojson, function (i, marker) {
                var v3 = [marker.lng, marker.lat];
                new mapboxgl.Marker()
                    .setLngLat(v3)
                    .addTo(map);

                new mapboxgl.Popup({
                        closeOnClick: true,
                        closeButton: true,
                    })
                    .setLngLat(v3)
                    .setHTML('<small>' + marker.address + '</small>')
                    .addTo(map);
            });
        }

        function onDragEnd() {
            var lngLat = marker.getLngLat();
            document.getElementById("lat").value = lngLat.lat;
            document.getElementById("lng").value = lngLat.lng;
            console.log('lng: ' + lngLat.lng + '<br />lat: ' + lngLat.lat);
        }
        document.getElementById('geocoder').appendChild(geocoder.onAdd(map));
});


Source: Ask Javascript Questions

LEAVE A COMMENT