---
metadata:
  - name: generator
    content: Diplodoc Platform v5.39.1
alternate:
  - en/
  - ru/
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt

# Quick start

Below are instructions for showing a basic map on a page.

{% note alert %}

The API key is a prerequisite for using the free version of the Yandex Maps API.

{% endnote %}


1. [Get the API key](#get-api-key)
1. [Enable the API](#load_api)
1. [Create a map container](#create_map_container)
1. [Create a map](#create_map)


## Step 1. Get the API key {#get-api-key}

Go to the [Developer's Dashboard](https://developer.tech.yandex.ru?ncrnd=1175) page and click **Get key**. In the popup window, select the «JavaScript API».

After you select the service, a form appears. In this form, you need to provide your contact information. After you fill in the form, the “Service successfully connected” text appears. The created key is now available in the «Keys» section. Use it when you enable the API.


## Step 2. Enable the API {#load_api}

Add the following string to the HTML page's `head` header:


```xml
<head>
    
</head>
```


[More information about enabling the API.](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/dg/concepts/load.md)

## Step 3. Create a map container {#create_map_container}

Create a **nonzero-size** visible container where the map will be placed. Any block type of HTML element can be used as the container (for example, the `div` element). The map will completely fill this element.

```xml
<body>
    <div id="map" style="width: 600px; height: 400px"></div>
</body>
```

The container's unique ID (`id="map"`) will be used in the next step for getting a reference to the map container.

## Step 4. Create a map {#create_map}

Create an instance of the map in the JavaScript code. Pass the following to the map constructor:
- HTML container ID.
- Map center.
- Zoom level.

Example:

```xml

```


{% note alert %}

The map should be created once the web page has completely loaded and the container ID has been generated. This will ensure that the container can be accessed by its `id`. To initialize the map after loading the page, you can use the [ready()](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ready.md) function. It will be called when the API is loaded and the DOM is generated.

{% endnote %}

[More information about creating a map.](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/dg/concepts/map.md)

## Result {#result_map}

Full text of the example:

```xml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Quick start. Placing an interactive map on a page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    
</head>

<body>
    <div id="map" style="width: 600px; height: 400px"></div>
</body>

</html>
```

See examples in the [sandbox](https://tech.yandex.ru/maps/jsbox/2.1/).