<style>
  .marker {
    background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/pin.svg');
    background-size: cover;
    cursor: pointer;
  }
</style><style>
  .marker {
    background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/pin.svg');
    background-size: cover;
    cursor: pointer;
  }
</style>
<div id="map"></div>

body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

const ACCESS_TOKEN =
  "pk.eyJ1Ijoib3R0eWxhYiIsImEiOiJjbTNsYmhxdWwwaWJtMnFxenIzNmJuaGJmIn0.QEnCKZZKJQBAbK8GFBzAcw";

mapboxgl.accessToken = ACCESS_TOKEN;
const map = new mapboxgl.Map({
  container: "map",
  center: [139.77, 35.68],
  zoom: 6
});

const searchBox = new MapboxSearchBox();
searchBox.accessToken = ACCESS_TOKEN;
searchBox.options = {
  language: "ja",
  country: "JP"
};

searchBox.theme = {
  variables: {
    colorText: "red",
    colorBackground: "gold"
  },
  cssText: "input:hover { background: lightyellow; }"
};

const el = document.createElement("div");
el.className = "marker";
const size = 100;
el.style.width = `${size}px`;
el.style.height = `${size}px`;
searchBox.marker = {
  element: el,
  rotationAlignment: "horizon",
  offset: [0, -size / 2]
};
searchBox.mapboxgl = mapboxgl;
map.addControl(searchBox);