Add a geocoder

Use the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API. Check out our Search Playground to explore geocoding query parameters and how they affect the results. See the example: https://docs.mapbox.com//mapbox-gl-js/example/mapbox-gl-geocoder/

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.css">
<!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->

<div id="map"></div>

CSS

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

.mapboxgl-ctrl-geocoder:first-child {
  z-index: 1001;
}

JavaScript

mapboxgl.accessToken = /* YOUR MAPBOX ACCESS TOKEN HERE */;

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-79.4512, 43.6568],
  zoom: 13
});
    
const geocoderStart = new MapboxGeocoder({
  accessToken: mapboxgl.accessToken,
  mapboxgl: mapboxgl,
  countries: 'us',
  marker : false,
  flyTo : false,
  placeholder : "Starting point",
});

const geocoderEnd = new MapboxGeocoder({
  accessToken: mapboxgl.accessToken,
  mapboxgl: mapboxgl,
  countries: 'us',
  marker : false,
  flyTo : false,
  placeholder : "Destination point",
});

map.addControl(geocoderStart); 
map.addControl(geocoderEnd);