Source: https://maps.vietmap.vn/docs/sdk-web-gl/map/example-map/simple-map/
# VietMap GL with HTML
This example demonstrates how to integrate VietMap GL with HTML to display a map.
## Example
```html
Map
```
To use your own colors and icons, create a map in [Map Editor](https://tools.vietmap.vn/map-editor/) and replace the style URL above with its style link.
## Map Options
| Prop | Type | Default | Description | Example |
| ---- | :--: | :-----: | :------: | :----------: |
| container | `HTMLElement` | `null` | Reference to the DOM element where the map will be mounted. | `mapContainer.current` (used with `useRef`) |
| style | [MapType](https://maps.vietmap.vn/docs/sdk-web-gl/map/example-map/style-map/) | `null` | URL of the map style. | `https://maps.vietmap.vn/maps/styles/tm/style.json?apikey=${VIETMAP_API_KEY}` |
| apiKey | `string` | `null` | `VietMap` API key provided by VietMap. | `VIETMAP_API_KEY` |
| center | `ILatLng` | `[0,0]` | Center coordinates of the map [longitude, latitude]. | `106.675477,10.758898` |
| zoom | `number` | `0` | Map zoom level. (0-18) | `12` |
| pitch | `number` | `0` | Map tilt angle. (0-60) | `0` |
| bearing | `number` | `0` | Map rotation angle in degrees. (0-360) | `0` |
| controlPosition | [ControlOptions](https://maps.vietmap.vn/docs/sdk-web-gl/map/example-map/control-map/) | `top-right` | Position of map control buttons. | `top-right` |
| minZoom | `number` | `0` | Minimum zoom level. (0-18) | `0` |
| maxZoom | `number` | `0` | Maximum zoom level. (0-18) | `0` |
| version | `string` | `1.5.3` | Map version. | `1.5.3` |
|interactive| [Interactive](https://maps.vietmap.vn/docs/sdk-web-gl/map/example-map/map-interaction/#interactive) | `true`| Allow user interaction with the map. | `true` |