CodeSweet | Добавляем стилизованные иконки и балуны на Яндекс карту

Иногда требуется запилить яндекс карту, но не совсем обычную, а с какими-нибудь «своими» красивыми иконками. Для этого требуется подключить карту не конструктором, а с помощью API яндекс карт. Кстати версий яндекс карт существует несколько. Я буду рассматривать API 2.1 — самую последнюю.

Шаг первый, подключим карту.

В шапке страницы, между тегами <head></head> пропишем подключение API:


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

Шаг второй, выведем заготовку, пустую карту в специальный блок:

В теле документа добавим блок для карты. А ниже футера, перед закрывающим тегом </body> вставим наш скрипт:


<body>
  <div id="customMap"></div>

  <script type="text/javascript">
       ymaps.ready(init); // когда апи готово, инициализируемя карту
       var customMap;     // объявим переменную для карты
       function init () { // функция инициализации
           customMap = new ymaps.Map("customMap", { // создадим карту выведем ее в див с id="customMap"
                center: [55.76, 37.64],             // центра карты
                behaviors: ['default', 'scrollZoom'], // скролл мышью
                zoom: 10, // масштаб карты
                controls: ["zoomControl", "fullscreenControl"]
           });
       } 
   </script> 
</body>

В принципе, все должно быть понятно, я описал в комментариях к коду очень подробно.

Шаг третий. Модифицируем наш скрипт — выведем стилизованную метку.

Заодно у нас стилизованы балуны. Если стилизация балуна не требуется, ее можно просто убрать из кода.

Что такое балун? Балун — это описание метки, появляющееся при нажатии на иконку метки.

Полностью получившийся код страницы, чтобы не возникало лишних вопросов:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
    <style>              
    html,body{width: 100%; height: 100%;}
    #customMap{width: 100%; height: 100%;}
    .customMapClose{position: absolute; top: 5px; right: 15px; text-decoration: none; cursor: pointer;}
    </style>
    <title>Яндекс карты</title>
</head>
<body>
<div id="customMap"></div>
<script type="text/javascript">
     ymaps.ready(init); // когда апи готово, инициализируемя карту
     var customMap;     // объявим переменную для карты
     function init () { // функция инициализации
         customMap = new ymaps.Map("customMap", { // создадим карту выведем ее в див с id="customMap"
              center: [55.76, 37.64],             // центра карты
              behaviors: ['default', 'scrollZoom'], // скроллинг колесом
              zoom: 10, // масштаб карты
              controls: ["zoomControl", "fullscreenControl"] // элементы управления
         });

        customPlacemark0 = new ymaps.Placemark([55.752577,37.632134], { // Создаем метку с координатами точки
              balloonContent: '<h4> Заголовок метки</h4><p>Описание метки.</p>
                               <a class="customMapClose" onclick="customMap.balloon.close()">X</a>
                              ' // содержимое балуна в формате html, все стили в css
        }, {          
          iconLayout: 'default#image',
          iconImageHref: 'img/ico.png', // картинка иконки
          iconImageSize: [36, 36], // размер иконки в пикселях
          iconImageOffset: [-18, -36], // позиция иконки в пикселях(считается от верхнего левого угла)
          balloonContentSize: [270, 99], // размер нашего кастомного балуна в пикселях
          balloonLayout: "default#imageWithContent", // указываем что содержимое балуна - стилизовано
          balloonImageHref: 'img/baloon.jpg', // Картинка бэкграунд балуна
          balloonImageOffset: [-36, -90], // смещание балуна, его необходимо подогнать
          balloonImageSize: [270, 90], // размер картинки-бэкграунда балуна
          balloonShadow: true
        });
        
        // Добавляем метки на карту
        customMap.geoObjects.add(customPlacemark0);          

     }   
       
    </script>
</body>
</html>

Картинки для иконки и балуна, положим в директорию img, рядом со страничкой. Таких меток можно выводить сколько угодно — просто копируем код, отвечающий за метку и добавление метки на карту. Но не забываем менять название переменной для метки, например customPlacemark0, customPlacemark1, итд.

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

Исходники примера Демо примера

Добавляем свои иконки на карту яндекс

Шаг первый, подключим карту.

Шаг второй, выведем заготовку, пустую карту в специальный блок:

Шаг третий. Модифицируем наш скрипт — выведем стилизованную метку.