how to control the position and zoom level of a mapbox map, served by WordPress - wordpress

Question

I have a directory website with placed you can have lunch. On the homepage you an search on your location or type in a city / lunchroom you know. When you press search you will see the result page with several listings. Here you can also choose to view the map (this is a Mapbox Api).
On the map the listings are shown, but the map doesn't automatically zoom in to your location. The map just shows the center of all listings. I want to show the listings within a 10km radius of the position you searched for.
On the MapBox website this is called GeoLocate (locate the user) and there is code for this you can use. So I changed the code to my preference only now I need to add it to my Wordpress theme. I'm using Directory theme Guido.
The code in the theme edit builder is different from the code I've made and I hope you can help me adjust the code properly. I'll show you both type of codes here so maybe that gives a better understanding:
This is the Wordpress Guido code in theme editor:
if ( $item.data('latitude') !== "" && $item.data('latitude') !== "" ) {
var zoom = (typeof MapWidgetZoom !== "undefined") ? MapWidgetZoom : 15;
self.addMakerToMap($item);
map.addLayer(markers);
map.setView([$item.data('latitude'), $item.data('longitude')], zoom);
$(window).on('update:map', function() {
map.setView([$item.data('latitude'), $item.data('longitude')], zoom);
});
$('.location-map-view').on('click', function(e){
e.preventDefault();
$('#single-listing-street-view-map').hide();
$('#'+map_e_id).show();
$('.location-street-view').removeClass('hidden');
$(this).removeClass('hidden').addClass('hidden');
map._onResize();
});
And the code for the MapBox Geolocate I need to add can be found here exactly: https://docs.mapbox.com/mapbox-gl-js/example/locate-user/
Hope anyone can help, thanks in advance