Estou modificando um exemplo que achei para poder localizar um endereço, ou arrastar o marcador para um determinado local e me retornar os dados necessários.
Ate ai tudo bem, esta funcionando a função de arrastar, e a função de buscar, porem quando eu busco um endereço, o marcador fica fixo, eu queria que pudesse arrasta-lo também, que e a mesma função que da quando carrega o mapa.
Segue o link de demostração
https://piicus.com/map_end.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a geocoder</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="assets/vendor/jquery/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
<link
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css"
type="text/css"
/>
<!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWFyY29zeHAiLCJhIjoiY2pjYzVrNjJnMWR6aTJ6bzV1MDM2OHFwMiJ9.5nxBF6nmFePPafH8reHnqw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-44.0318203, -19.9435687],
zoom: 13
});
map.addControl(
new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl
})
);
var marker = new mapboxgl.Marker({
draggable: true
})
.setLngLat([-44.0318203, -19.9435687])
.addTo(map);
function onDragEnd() {
var lngLat = marker.getLngLat();
var benchmarkName = location.hash.substr(1);
console.log(lngLat.lng + ' | ' + lngLat.lat + ' | ' + benchmarkName);
$.getJSON( "https://nominatim.openstreetmap.org/reverse.php?format=json&lat="+lngLat.lat+"&lon="+lngLat.lng, function( json ) {
//console.log( json.display_name );
//console.log( json.address );
console.log( json.address.road );
console.log( json.address.city );
console.log( json.address.country );
console.log( json.address.suburb );
});
}
marker.on('dragend', onDragEnd);
</script>
</body>
</html>