Quick start
Step 1. Get an API key
Get a key for the JavaScript API and Geocoder HTTP package.
Note
Key activation takes up to 15 minutes.
The JS API 3.0 works only with the keys with the "Restriction by HTTP Referer" field filled in. See configuring restrictions
Step 2. Connect the API
Create an HTML page and add the <script> tag inside the <head>. It 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>
Instead of YOUR_API_KEY, substitute the key obtained in step 1.
Step 3. Create a container
Inside the <body> add a block-type element, for example <div>. It is important to create a nonzero-sized visible container, the map will fill it completely.
<body>
...
<div id="map" style="width: 600px; height: 400px"></div>
...
</body>
Note
It is not necessary to set the container id="map", as shown in the example.
In the example, we used id to initialize the map inside this container in the next step. But you can do this without the id if you pass a link to the HTMLElement of the container in the next step. Do as is convenient for you.
Step 4. Create a map
In any way convenient for you, connect the following js code to the page.
initMap();
async function initMap() {
// The `ymaps3.ready` promise will be resolved when all the API components are loaded
await ymaps3.ready;
const {YMap, YMapDefaultSchemeLayer} = ymaps3;
// Map creation
const map = new YMap(
// Pass the link to the HTMLElement of the container
document.getElementById('map'),
// Pass the initialization parameters
{
location: {
// The map center coordinates
center: [25.229762, 55.289311],
// Zoom level
zoom: 10
}
}
);
// Add a layer to display the schematic map
map.addChild(new YMapDefaultSchemeLayer());
}
Full text of the example
Load this page in the browser and you will 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: [25.229762, 55.289311],
zoom: 10
}
}
);
map.addChild(new YMapDefaultSchemeLayer());
}
</script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>
Note
The promise maps 3.ready ensures that all components of the main module Javascript API are loaded and the DOM is built.
To download packages or modules use the ymaps3.import method.