> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt)

# Display a map on a webpage

This example uses [`mapboxgl.Map`](https://docs.mapbox.com/mapbox-gl-js/api/map/) to initialize a Mapbox map inside an HTML element on a webpage.

You can use the [`map` parameters](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters) `style`, `center`, and `zoom` to define the initial appearance of the map. The Mapbox Standard Style is enabled by default when no `style` option is provided to the `Map` constructor.

The string value for `accessToken` should be a valid [access token](https://docs.mapbox.com/help/glossary/access-token/) from a Mapbox user account.

> Example code:

**JavaScript**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.28.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.28.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
    const map = new mapboxgl.Map({
        // TO MAKE THE MAP APPEAR YOU MUST
        // ADD YOUR ACCESS TOKEN FROM
        // https://account.mapbox.com
        accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
        container: 'map', // container ID
        center: [-71.06776, 42.35816], // starting position [lng, lat]. Note that lat must be set between -90 and 90
        zoom: 9 // starting zoom
    });
</script>

</body>
</html>
```

**React**

```jsx
import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';

import 'mapbox-gl/dist/mapbox-gl.css';

const MapboxExample = () => {
  const mapContainerRef = useRef();
  const mapRef = useRef();

  useEffect(() => {
    mapRef.current = new mapboxgl.Map({
      // TO MAKE THE MAP APPEAR YOU MUST
      // ADD YOUR ACCESS TOKEN FROM
      // https://account.mapbox.com
      accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
      container: mapContainerRef.current,
      center: [-74.5, 40], // starting position [lng, lat]
      zoom: 9 // starting zoom
    });
  });

  return (
    <div
      style={{ height: '100%' }}
      ref={mapContainerRef}
      className="map-container"
    />
  );
};

export default MapboxExample;
```

## More Resources

View these other examples and tutorials to learn how to enhance your map:

> **Related content (tutorial): [Add custom markers in Mapbox GL JS](https://docs.mapbox.com/help/tutorials/custom-markers-gl-js/)**
> 
> Learn how to build an interactive web map that adds custom markers to your map using Mapbox GL JS.

> **Related content (example): [Add a default marker to a web map](https://docs.mapbox.com/mapbox-gl-js/example/add-a-marker/)**
> 
> This example adds two default markers to the map using Mapbox GL JS.

> **Related content (example): [Add markers to a web map with a symbol layer](https://docs.mapbox.com/mapbox-gl-js/example/geojson-markers/)**
> 
> This example uses GeoJSON data to add a collection of points to the map.