# Maps

The map object represents a map of the screen.\
It provides methods and properties for programmatically changing the map and generating an event when an user interacts with it.\
Map instance creates a map by specifying containers and other options.

<img src="https://1261489371-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbhUxg7pUm1DCByBZfOP%2Fuploads%2F5SxZw1sTGQeZenjdETWd%2Ffile.drawing.svg?alt=media&#x26;token=5c3e5e76-08f6-4065-b0e2-2b67a8f6fb2d" alt="" class="gitbook-drawing">

| Name        | Description                                                                                                                                 | Optional |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `zoom`      | The zoom value is the zoom in/out value of the map. Not the required input.                                                                 | `option` |
| `center`    | Center is coordinate value that will be displayed to the center at the first loading of the map and is a required input.                    | `must`   |
| `maxZoom`   | Maximum zoom value. Not required value.                                                                                                     | `option` |
| `minZoom`   | Minimum zoom value. Not required value.                                                                                                     | `option` |
| `key`       | Authentication value for map use. Required input value.                                                                                     | `must`   |
| `buttonBox` | Set map control box visibility on map instance initialization. Setting this option as "false" would hide the control box.  Default: "true". | `option` |

### Example

```markup
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>FATOS Map</title>
</head>
<body>
<div style="height: 100vh;">
    <div id="app"></div>

</div>
<script type="text/javascript" src="https://maps.fatos.biz/dist/fatosmap-gl.js"></script>
<script>
    let LatLng = {lat: 37.482890, lng: 126.896086}
    let mapInstance = new fatosmap.maps.Map(
        document.getElementById("app"),
        {
            zoom: 14,
            center: LatLng,
            maxZoom: 20,
            minZoom: 2,
            key: 'YOUR_API_KEY'
        }
    )
</script>
</body>
</html>
```
