> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt) # Toggle marker visibility This example demonstrates how to show and hide [Markers](https://docs.mapbox.com/help/glossary/marker/) on a web map using checkboxes. Because Markers are HTML elements that are positioned in front of the map, you can use JavaScript and CSS to manipulate their visibility as you would any other DOM element. When a checkbox is unchecked, the code applies a `hidden` CSS class to the corresponding Marker elements using the [`getElement`](https://docs.mapbox.com/mapbox-gl-js/ja/api/markers/#marker#getelement) method. The CSS class uses `display: none` to hide the markers from view. When the checkbox is checked again, the `hidden` class is removed, making the markers visible again. > Example code: **JavaScript** ```html Toggle marker visibility
``` **React** ```jsx import React, { useEffect, useRef, useState } from 'react'; import * as mapboxgl from 'mapbox-gl/esm'; import 'mapbox-gl/dist/mapbox-gl.css'; const menuStyle = { background: '#fff', position: 'absolute', zIndex: 1, top: 10, left: 10, borderRadius: 3, width: '150px', fontFamily: "'Open Sans', sans-serif", padding: '10px', border: 'none', boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)' }; const labelStyle = { display: 'flex', alignItems: 'center', fontSize: '13px', color: '#404040', marginBottom: '8px', cursor: 'pointer' }; const checkboxStyle = { marginRight: '8px', cursor: 'pointer' }; const MapboxExample = () => { const mapContainerRef = useRef(); const mapRef = useRef(); const redMarkerRef = useRef(); const blueMarkerRef = useRef(); const [showRed, setShowRed] = useState(true); const [showBlue, setShowBlue] = useState(true); 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: 'map', style: 'mapbox://styles/mapbox/standard', center: [-87.6298, 41.8781], zoom: 12, pitch: 55 }); // Create markers redMarkerRef.current = new mapboxgl.Marker({ color: '#e41a1c' }) .setLngLat([-87.6298, 41.8781]) .addTo(mapRef.current); blueMarkerRef.current = new mapboxgl.Marker({ color: '#377eb8' }) .setLngLat([-87.635, 41.865]) .addTo(mapRef.current); return () => { // Clean up markers on unmount redMarkerRef.current?.remove(); blueMarkerRef.current?.remove(); mapRef.current.remove(); }; }, []); // Toggle marker visibility using CSS class const toggleMarker = (markerRef, show) => { if (markerRef.current) { const element = markerRef.current.getElement(); if (show) { element.classList.remove('hidden'); } else { element.classList.add('hidden'); } } }; useEffect(() => { toggleMarker(redMarkerRef, showRed); }, [showRed]); useEffect(() => { toggleMarker(blueMarkerRef, showBlue); }, [showBlue]); return ( <>
); }; export default MapboxExample; ```