Usando MapBox para la geolocalización en html

Me gustaría mostrar la dirección en dynamics CRM usando MapBox API, he usado Google API y funciona perfectamente, pero ahora me gustaría mostrarla usando el cuadro de mapa.

He examinado la función de ubicación geográfica avanzada de Mapbox, pero aún no está clara. Entonces mi variable mi variable de dirección vendrá de un campo. por ejemplo, var address = "6 Antares Drive, Ottawa, Ontario K2E 8A2, Canadá";

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add a geocoder</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.1/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.1/mapbox-gl-geocoder.css' type='text/css' />
<div id='map'></div>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibGF3aXgxMCIsImEiOiJjamJlOGE1bmcyZ2V5MzNtcmlyaWRzcDZlIn0.ZRQ73zzVxwcADIPvsqB6mg';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-79.4512, 43.6568],
    zoom: 13
});

var address = "6 Antares Drive, Ottawa, Ontario K2E 8A2, Canada";

var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken });
geocoder.query(address); // how do i search and display this address
map.addControl(geocoder);

//map.addControl(new MapboxGeocoder({
 //   accessToken: mapboxgl.accessToken
//}));

</script>
</body>
</html>

¿Cómo se puede mostrar la dirección de manera similar a la del mapa de Google en la página HTML?

Respuestas a la pregunta(2)

Su respuesta a la pregunta