Quick start

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

Alert

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

  1. Get the API key
  2. Enable the API
  3. Create a map container
  4. Create a map

Step 1. Get the API key

Go to the Developer's Dashboard page and click Get key. In the popup window, select the «JavaScript API and Geocoder HTTP 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

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

<head>
    <script src="https://api-maps.yandex.ru/2.1/?apikey=Your API key&lang=en_US" type="text/javascript">
    </script>
</head>

More information about enabling the API.

Step 3. Create a 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.

<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 an instance of the map in the JavaScript code. Pass the following to the map constructor:

  • HTML container ID.
  • Map center.
  • Zoom level.

Example:

<script type="text/javascript">
    // The ymaps.ready() function will be called when
    // all the API components are loaded and the DOM tree is generated.
    ymaps.ready(init);
    function init(){ 
        // Creating the map.    
        var myMap = new ymaps.Map("map", {
            // The map center coordinates.
            // Default order: «latitude, longitude».
            // To not manually determine the map center coordinates,
            // use the Coordinate detection tool.
            center: [55.76, 37.64],
            // Zoom level. Acceptable values:
            // from 0 (the entire world) to 19.
            zoom: 7
        });
    }
</script>

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() function. It will be called when the API is loaded and the DOM is generated.

More information about creating a map.

Result

Full text of the example:

<!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" />
    <script src="https://api-maps.yandex.ru/2.1/?apikey=Your API key&lang=en_US" type="text/javascript">
    </script>
    <script type="text/javascript">
        ymaps.ready(init);
        function init(){ 
            var myMap = new ymaps.Map("map", {
                center: [55.76, 37.64],
                zoom: 7
            });
         }
    </script>
</head>

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

</html>

See examples in the sandbox.