Mapbox Map

Demo

<div id="map" class="w-100 mb-5 rounded-3" style="height: 350px"></div> 


<!--Mapbox-->
<link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet'/>


    <!--maps js-->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiZGVzaWdubXlsaWZlIiwiYSI6ImNqeHlkMzljejAwaHAzbXFtaXphYWI3NmYifQ.IRPz2gseBSE-DQMzurY4ZA';
        var officeLocation = [75.788350, 26.958520];
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/light-v10',
            center: officeLocation,
            zoom: 9
        });
        // create the popup
        var popup = new mapboxgl.Popup({ offset: 18 }).setHTML(
            '<h6 class="text-primary mb-0 fw-normal">Our office</h6><small class="text-body-secondary">CreativeDM, SE-03, Vidhyadhar Nagar, Jaipur, 302012</small>'
        );
        // create DOM element for the marker
        var el = document.createElement('div');
        el.id = 'marker';
        // disable map zoom when using scroll
        map.scrollZoom.disable();
        // create the marker
        new mapboxgl.Marker(el)
            .setLngLat(officeLocation)
            .setPopup(popup) // sets a popup on this marker
            .addTo(map);
    </script>
Explore mapbox