Tengo un sitio web de directorio en el que puedes almorzar. En la página de inicio, busque su ubicación o escriba una ciudad / cafetería que conozca. Cuando presione buscar, verá la página de resultados con varios listados. Aquí también puede elegir ver el mapa (esto es un Mapbox Api).

En el mapa se muestran los listados, pero el mapa no se acerca automáticamente a su ubicación. El mapa solo muestra el centro de todos los listados. Quiero mostrar los listados dentro de un radio de 10 km de la posición que buscó.

En el sitio web de MapBox esto se llama GeoLocate (localizar al usuario) y hay un código para esto que puede usar. Así que cambié el código a mi preferencia, solo que ahora necesito agregarlo a mi tema de Wordpress. Estoy usando el tema del directorio Guido.

El código en el generador de edición de temas es diferente del código que he creado y espero que me puedan ayudar a ajustar el código correctamente. Te mostraré ambos tipos de códigos aquí, así que tal vez eso te dé una mejor comprensión:

Este es el código de Wordpress Guido en el editor de temas:

 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(); });

Y el código para MapBox Geolocate que necesito agregar se puede encontrar exactamente aquí: https://docs.mapbox.com/mapbox-gl-js/example/locate-user/

Espero que alguien pueda ayudar, gracias de antemano