Remove default Marker from Mapbox Geocoder

Question

I am currently a beginner who is trying to build a project using ReactJS and Mapbox GL JS. So far, I have created a map with a Geocoder, Navigation Controls, and Markers at locations retrieved from a JSON file. However, the annoying thing is that whenever I search for a location using the Geocoder, it places a marker on the spot I had searched for. For now, I have just edited the marker property and made the color different from the markers on the JSON locations, so it looks somewhat presentable, but this is only a temporary solution. How would I go about removing the default marker completely? Attached is the Geocoder element code:

const geocoder = new MapboxGeocoder({
      accessToken: mapboxgl.accessToken,
      mapboxgl: mapboxgl,
      placeholder: "Search City, State, Country, Zip Code",
      marker: {
        color: "black",
      },
    });
map.addControl(geocoder);

Essentially, I am trying to find a way to get rid of the Geocoder marker altogether. Thanks!

Answer 1

In react-map-gl-geocoder's GitHub home page it explains about prop 'marker' that:

If true, a Marker will be added to the map at the location of the user-selected result using a default set of Marker options. If the value is an object, the marker will be constructed using these options. If false, no marker will be added to the map.

so basically you need to change your code to:

const geocoder = new MapboxGeocoder({
  accessToken: mapboxgl.accessToken,
  mapboxgl: mapboxgl,
  placeholder: "Search City, State, Country, Zip Code",
  marker: {false},
});
map.addControl(geocoder);