> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt) # Create a draggable Marker Drag the [`Marker`](https://docs.mapbox.com/mapbox-gl-js/ja/api/markers/#marker) to a new location on a map and populate its coordinates in a display. > Example code: **JavaScript** ```html Create a draggable Marker 






```

**React**

```jsx
import React, { useEffect, useRef, useState } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';

import 'mapbox-gl/dist/mapbox-gl.css';

const MapboxExample = () => {
  const mapContainerRef = useRef();
  const mapRef = useRef();

  const [coordinates, setCoordinates] = useState();

  useEffect(() => {
    mapRef.current = new mapboxgl.Map({
      // TO MAKE THE MAP APPEAR YOU MUST
      // ADD YOUR ACCESS TOKEN FROM
      // https://account.mapbox.com
      accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/standard',
      center: [0, 0],
      zoom: 2
    });

    const marker = new mapboxgl.Marker({
      draggable: true
    })
      .setLngLat([0, 0])
      .addTo(mapRef.current);

    function onDragEnd() {
      const lngLat = marker.getLngLat();
      setCoordinates([
        `Longitude: ${toFourDecimalPlaces(lngLat.lng)}`,
        `Latitude: ${toFourDecimalPlaces(lngLat.lat)}`
      ]);
    }

    marker.on('dragend', onDragEnd);
    return () => {
      mapRef.current.remove();
    };
  }, []);

  function toFourDecimalPlaces(num) {
    return parseFloat(num.toFixed(4));
  }

  return (
    <>
      

      

        {coordinates &&
          coordinates.map((coord) => 
{coord}
)}
      

    
  );
};

export default MapboxExample;
```

> **Related content (video): [Custom Markers](null)**
> 
> If you would like to customize your markers with images or other HTML functionality, see our Custom Markers video tutorial.