<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Create a draggable Marker</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
	.coordinates {
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		position: absolute;
		bottom: 40px;
		left: 10px;
		padding: 5px 10px;
		margin: 0;
		font-size: 11px;
		line-height: 18px;
		border-radius: 3px;
		display: none;
	}
</style>

<div id="map"></div>
<pre id="coordinates" class="coordinates"></pre>

<script>
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(showPosition);
	  } else { 
		alert("مرورگر پشتیبانی نمیشود") ;
	  }
 function showPosition(position) {

 mapboxgl.accessToken = 'pk.eyJ1IjoiYWxpZmF0dGFoaSIsImEiOiJjamM0dmQxY3kxMm4yMndwY282eng4ZXJpIn0.64jicpYSqmrfLVr6TQaUSQ';
 const coordinates = document.getElementById('coordinates');
 const map = new mapboxgl.Map({
	 container: 'map',
	 // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
	 style: 'mapbox://styles/mapbox/streets-v12',
	 center: [position.coords.longitude, position.coords.latitude],
	 zoom: 15
 });
 
 const marker = new mapboxgl.Marker({
	 draggable: true
 })
	 .setLngLat([position.coords.longitude, position.coords.latitude])
	 .addTo(map);
 
 function onDragEnd() {
	 const lngLat = marker.getLngLat();
	 coordinates.style.display = 'block';
	 coordinates.innerHTML = `Longitude: ${lngLat.lng}<br />Latitude: ${lngLat.lat}`;
 }
 
 marker.on('dragend', onDragEnd);
 // Add geolocate control to the map.
 
 map.addControl(
 new mapboxgl.GeolocateControl({
 positionOptions: {
 enableHighAccuracy: true
 },
 // When active the map will receive updates to the device's location as it changes.
 trackUserLocation: true,
 // Draw an arrow next to the location dot to indicate which direction the device is heading.
 showUserHeading: true
 })
 );
 
 }
	  

	
	
	
	

</script>

</body>
</html>