Пример работы с Яндекс Картой

11.12.2013

Пример с размещением нескольких точек на карте, реакцией на клик, а также боковым сайд блоком со списком "Офисов"

Для начала нужно получить ключ (он не привязан к домену), подробно можно прочесть в документации.

Выдержка: Зайдите на страницу Кабинета Разработчика и нажмите кнопку Получить ключ. Во всплывающем окне выберите сервис «JavaScript API и HTTP Геокодер».

В итоге сам ключ получается на странице.

HTML

 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Yandex Map Test</title>

    <link rel="stylesheet" href="map.css">
    <script src="https://api-maps.yandex.ru/2.1/?apikey=XXX&lang=ru_RU" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="map.js"></script>
</head>
<body>

    <section id="ymap">
        <div class="ymap-side">

            <div class="ymap-side__item" data-id="10">
                <div class="ymap-side__title">
                    Абакан
                </div>
                <div class="ymap-side__address">
                    г. Абакан, ул. Фрунзе, д. 2
                </div>
            </div>

            <div class="ymap-side__item" data-id="11">
                <div class="ymap-side__title">
                    Алматы
                </div>
                <div class="ymap-side__address">
                    Республика Казахстан, г. Алматы, ул. Ахметова, д. 51
                </div>
            </div>

            <div class="ymap-side__item" data-id="12">
                <div class="ymap-side__title">
                    Астрахань
                </div>
                <div class="ymap-side__address">
                    г. Астрахань, ул. Звездная дом 7 корпус 3
                </div>
            </div>

            <div class="ymap-side__item" data-id="13">
                <div class="ymap-side__title">
                    Владивосток
                </div>
                <div class="ymap-side__address">
                    г. Владивосток, ул. Набережная, д. 9, оф. 8
                </div>
            </div>

            <div class="ymap-side__item" data-id="14">
                <div class="ymap-side__title">
                    Чебоксары
                </div>
                <div class="ymap-side__address">
                    Обслуживается через филиал в Казани
                </div>
            </div>

        </div>


        <div class="ymap__map">
            <div id="map" style="width: 600px; height: 300px"></div>
        </div>
    </section>

</body>
</html>

JS

 
const aItems = [
    {
        id : 10,
        title : 'Абакан',
        x : '53.736180145476',
        y : '91.457394864418',
        url : 'https://yandex.ru/yandsearch?text=Абакан',
    },
    {
        id : 11,
        title : 'Алматы',
        x : '43.359369644128',
        y : '77.015855771163',
        url : 'https://yandex.ru/yandsearch?text=Алматы',
    },
    {
        id : 12,
        title : 'Астрахань',
        x : '46.326895',
        y : '48.048423',
        url : 'https://yandex.ru/yandsearch?text=Астрахань',
    },
    {
        id : 13,
        title : 'Владивосток',
        x : '43.112157939326',
        y : '131.8729985',
        url : 'https://yandex.ru/yandsearch?text=Владивосток',
    },
    {
        id : 14,
        title : 'Чебоксары',
        x : '56.146247',
        y : '47.250153',
        url : 'https://yandex.ru/yandsearch?text=Чебоксары',
    },
];

let Places = [];


function init(){
    const myMap = new ymaps.Map("map", {
        center: [55.76, 37.64],
        zoom: 2 // 0 - 19
    });


    for (let item of aItems) {
/*
        let myGeoObject = new ymaps.GeoObject({
            geometry: {
                type: "Point", // тип геометрии - точка
                coordinates: [item.x, item.y]
            }
        });
        myMap.geoObjects.add(myGeoObject);
*/
        let oPlacemark = new ymaps.Placemark([item.x, item.y], {
            balloonContentHeader: item.title,
            balloonContentBody: 'Перейти к <a target="_blank" href="' + item.url + '">поиску</a>',
            //balloonContentFooter: "Подвал",
            hintContent: item.title // "Хинт метки"
        });
        oPlacemark.events.add('click', function () {
            //alert('О, событие!');
        });
        myMap.geoObjects.add(oPlacemark);

        Places[item.id] = oPlacemark;
    }
}

ymaps.ready(init);


(function($){
    $(function() {
        $('#ymap .ymap-side__title ').on('click', function(event){
            let id = $(this).parent().data("id");
            Places[id].balloon.open();
        });
    });
})(jQuery);

CSS

 
#ymap {
    display: flex;
}

#ymap .ymap-side {
    height: 300px;
    overflow-y: scroll;
}

#ymap .ymap-side__item {
    height: 79px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 90%;
    overflow: hidden;
    border-bottom: 1px solid #bbdceb;
    margin: 0 auto;
}

#ymap .ymap-side__title {
    font-size: 20px;
    color: #19a2e1;
    margin-top: 20px;
    cursor: pointer;
}

#ymap .ymap-side__address {
    font-size: 15px;
    color: #000;
}


@media (max-width: 768px) {
    #ymap {
        flex-direction: column;
    }
}

Категории: Web, Сторонние сервисы

Пометки: ymap яндекс карта, яндекс карты, api-maps.yandex.ru

Пример работы с Яндекс Картой

HTML

JS

CSS

Связанные материалы: