Как вывести на одной странице несколько яндекс карт путем перебора кординат на js?

от
prokoding.ru > JavaScript > Как вывести на одной странице несколько яндекс карт путем перебора кординат на js?

Для вывода нескольких карт Яндекса на одной странице, нам необходимо использовать API Яндекс.Карт и JavaScript. Вот примерный шаги, как это можно сделать:

1. Включите API Яндекс.Карт на вашей странице. Для этого добавьте следующий тег скрипта в <head> вашего HTML документа:

<script src="https://api-maps.yandex.ru/2.1/?apikey=YOUR_API_KEY&lang=ru_RU" type="text/javascript"></script>

Вместо YOUR_API_KEY укажите ваш собственный ключ API, который вы можете получить на сайте Яндекса.

2. Создайте контейнеры для каждой карты на вашей странице. Например, добавьте в HTML следующий код:

<div id="map1" style="width: 600px; height: 400px;"></div>
<div id="map2" style="width: 600px; height: 400px;"></div>

3. Напишите JavaScript код, который создаст каждую карту и поместит ее в соответствующий контейнер. Пример кода:

ymaps.ready(init);

function init() {
    var myMap1 = new ymaps.Map("map1", {
        center: [55.76, 37.64], // координаты центра первой карты
        zoom: 10 // масштаб первой карты
    });

    var myPlacemark1 = new ymaps.Placemark([55.76, 37.64], {hintContent: 'Метка 1'}, {
        iconColor: '#0095b6'
    });

    myMap1.geoObjects.add(myPlacemark1);

    var myMap2 = new ymaps.Map("map2", {
        center: [55.75, 37.64], // координаты центра второй карты
        zoom: 10 // масштаб второй карты
    });

    var myPlacemark2 = new ymaps.Placemark([55.75, 37.64], {hintContent: 'Метка 2'}, {
        iconColor: '#ff0000'
    });

    myMap2.geoObjects.add(myPlacemark2);
}

Этот пример создает две карты с различными координатами и помещает на них метки с разными цветами.

4. Вы можете добавить стилизацию и другие опции для карт согласно вашим требованиям.

Следуя этим шагам, вы сможете вывести несколько Яндекс карт на одной странице путем перебора координат на JavaScript.