Quick start
Tip
Before getting started with the JavaScript API, please see the rates.
Step 1. Get an API key
Get a key for the JavaScript API package
Note
The key is activated within 15 minutes after you receive it.
Thr JS API 3.0 works only with the keys with the "Restriction by HTTP Referer" field filled in. Learn more about the restrictions
Step 2. Connect the API
Create an HTML page and, inside <head>, add the <script> tag that will load the JS API to the page.
<head>
...
<script src="https://api-maps.yandex.ru/v3/?apikey=YOUR_API_KEY&lang=en_US"></script>
...
</head>
Replace YOUR_API_KEY with the key you obtained in step 1.
Step 3. Create a container
Add a block-level element, such as <div>, inside <body>. You need to set a non-zero size to the element, the map will fill it completely.
<body>
...
<div id="map" style="width: 600px; height: 400px"></div>
...
</body>
Note
Setting id="map" to the container, as shown in the example, is optional.
In the example, we used id to initialize the map inside that container in the next step. However, you can do this without id if you pass a link to the HTMLElement of the container in the next step. Choose whichever method you like best.
Step 4. Initialize a map
Add the following JS code to the page in any way you like.
initMap();
async function initMap() {
// The `ymaps3.ready` promise will be resolved when all components of the core API module are loaded
await ymaps3.ready;
const {YMap, YMapDefaultSchemeLayer} = ymaps3;
// Initialize the map
const map = new YMap(
// Pass a link to the HTMLElement of the container
document.getElementById('map'),
// Pass the map initialization parameters
{
location: {
// Map center coordinates
center: [37.588144, 55.733842],
// Scale level
zoom: 10
}
}
);
// Add a layer for displaying the schematic map
map.addChild(new YMapDefaultSchemeLayer());
}
Note
The ymaps3.ready promise guarantees that all components of the core JavaScript API module are loaded and the DOM is built.
To load packages or modules, use the ymaps3.import method.
More about map initialization parameters
Full text of the example
Load this page in your browser to see the map.
<!DOCTYPE html>
<html>
<head>
<title>Quick start. Placing an interactive map on the web page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://api-maps.yandex.ru/v3/?apikey=YOUR_API_KEY&lang=en_US"></script>
<script>
initMap();
async function initMap() {
await ymaps3.ready;
const {YMap, YMapDefaultSchemeLayer} = ymaps3;
const map = new YMap(
document.getElementById('map'),
{
location: {
center: [37.588144, 55.733842],
zoom: 10
}
}
);
map.addChild(new YMapDefaultSchemeLayer());
}
</script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>